在css当中before选择器用来向被选择的标签前面插入内容，after选择器用来向被选择的标签后面插入内容。
举例说明
我们要通过css向一个p标签的前面和后面插入内容。内容可以是文本可以是样式。
在这里要使用到css当中的content属性，content属性可以通过css向html标签里添加文字内容。
基本的html
<p>我是中间</p>
原始的html如上。
在css中添加before和after选择器
p:before{
content:"我是前面";
}
p:after{
content:"我是后面";
}
添加完css之后html的状态
<p>我是前面</p>
<p>我是中间</p>
<p>我是后面</p>
总结
before和after应用的样式被添加到了伪元素上，就是实际上这种标签元素都是不存在的，但是有时为了方便所以我们通过添加一个假的代码来实现。
案例
电池
http://timelife.applinzi.com/
大家可以用浏览器的调试模式查看这个案例，案例当中绘制的电池的电池帽和底部修饰，就是通过before和after实现的。
网友评论