关于css的before和after选择器

在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实现的。