before && after
这两个伪类元素 功能 很相似，都是在元素内部插入新的 内容 。下面一起看下他们的区别和 用法 。
1. 官方定义
before：元素的 内容 之前插入新 内容 。
after：元素的 内容 之后插入新 内容 。
2. 解释
before 和 after 的 功能 就是在元素的内部的原有 内容 之前，或者之后插入新的 内容 。
3. 语法
.demo :before {
}
.demo :after {
}
解释：使用 方法 如上面，通过在元素选择器后面 增加 一个 : 来开始伪类的使用。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android all all all all all all all all
5. 实例
< div class = " demo " > 网 </ div >
在元素 内容 之前 插入文字 ：姓名。
.demo :before {
content : '姓名：' ;
}
效果 图：
元素 内容 之前 插入文字 ：姓名 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style > @H_509_ 301 @
.demo :before {
content : '姓名：' ;
}
</ style >
</ head >
< body >
< div class = " demo " > 网 </ div >
</ body >
</ html >
在元素 内容 之后插入：很好。
.demo :after {
content : '很好' ;
}
效果 图：
在元素 内容 之后插入：很好 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style > @H_509_ 301 @
.demo :after {
content : '很好' ;
}
</ style >
</ head >
< body >
< div class = " demo " > 网 </ div >
</ body >
</ html >
6. 经验 分享
这两个伪类当然不是仅仅插入 内容 这么简单，它还有其他的妙用。
使用伪类 after 清除元素内部浮动 效果 ：
< div class = " demo " >
< div class = " item " > 慕 </ div >
< div class = " item " > 课 </ div >
</ div >
< div class = " " > 网 </ div >
.demo :after {
content : '' ;
dis play : block ;
clear : both ;
}
.item {
float : left ;
}
效果 图：
使用伪类 after 清除浮动 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style > @H_509_ 301 @
.demo :after {
content : '' ;
dis play : block ;
clear : both ;
}
.item {
float : left ;
}
</ style >
</ head >
< body >
< div class = " demo " >
< div class = " item " > 慕 </ div >
< div class = " item " > 课 </ div >
</ div >
< div class = " " > 网 </ div >
</ body >
</ html >
说明：下面灰色部分是没有清除浮动的 效果 ，上面是清除浮动的 效果 。因为清除了浮动所以 “网” 这个字换行了。
在元素 内容 开始前插入 图片 。
< div class = " demo " > 网 </ div >
.demo :before {
content : '' ;
dis play : inline-block ;
width : px ;
height : px ;
font-size : px ;
line-height : px ;
background : url(//img.mukewang.com/wiki/5eea2f6809a8d35e00400040.jpg) center no-repeat ;
background-size : cover ;
}
元素 内容 开始前插入 图片 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style > @H_509_ 301 @
.demo :before {
content : '' ;
dis play : inline-block ;
width : px ;
height : px ;
font-size : px ;
line-height : px ;
background : url(//img.mukewang.com/wiki/5eea2f6809a8d35e00400040.jpg) center no-repeat ;
background-size : cover ;
}
</ style >
</ head >
< body >
< div class = " demo " > 网 </ div >
</ body >
</ html >
7. 小结
注意：对于 IE8 及更早版本中的 :before 、 :after ，必须声明 <!DOCTYPE>。 在元素选择器后面这样写也可以：
.demo ::before {
}
.demo ::after {
}
nth 类型元素选择器 ? ?only 元素选择
查看更多关于before && after 位置的详细内容...