Css3伪元素before和after的区别和用法

Css3中的伪元素before和after是非常实用的两个伪元素，在Css3出来后，使网页前端设计人员在页面设计上更加方便和快捷。

那么before和after这两个伪元素有什么区别呢？

从英文字面上来理解：

before:意思是在什么什么之前，而after:意思是在什么什么之后的意思，区别起来还是很简单的。

伪元素before和after的用法：

before和after伪元素必须包含：content:' ';样式。

例如：

h3::before{content:'\e67d';font-family: "iconfont";font-size:24px;color:red;}

content中引用的是阿里的一个图标库，设置了文字样式，文字大小，文字的颜色。可以看出before和after伪元素其实和一般的Css的元素是一样的，可以设置很多样式，唯一不同的是必须包含content，否则伪元素将不生效。

伪元素before和after运用场景：

比这一般在制作排行榜或者是栏目标题前使用before伪元素，给排行榜添加有序排行美化，引用字体图标库给版块标题添加可视化图标进行美化。而after用的比较少，一般是应用在清除Div浮动上。