CSS3中的伪元素:before和:after是非常实用的两个伪元素，在CSS3出来后，使网页前端设计人员在页面设计上更加方便和快捷。配合content属性，可以在元素的前面或后面插入新元素，content即插入元素的值，这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。效果使用参考：

像这种小图标大多使用before，after来实现，不仅简单还方便。

before和after的描述如下：

content：输入要插入的部分内容

要在content中插入字母和符号，请用“”括起来并输入。
要在content中插入图像和声音，请输入url（目标路径）。

也可以为同一元素指定before和after。

CSS3中before和after等伪元素使用::（双冒号），但即使只有一个冒号，它在大多数浏览器中也能识别并正常工作。

支持的浏览器

支持:: before和:: after伪元素的浏览器：Chrome、Firefox3.5~、Safari4~、IE8~、Opera6~。

简单的实例如下：

在每个 <p> 元素的内容之前插入新内容：

p:before{ 
content:"台词：";
}

可以有如下的定义值：

那么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浮动上。

最后解释一下关于冒号的数量

有两种伪元素，: before /：after和:: before / :: after。

在css2中，写一个冒号，如，: before /：after。

在css3中，写两个冒号，例如，:: before / :: after。

由于css3是最新的css，因此也可以说伪元素是:: before / :: after。

对于:: before / :: after，主浏览器兼容。

但是，应该注意的是，css3的一部分语法与主浏览器并不兼容。