::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，基本的效果是这样的:
CSS代码
div::after {
content: "你好";
}
HTML代码
<div>
<!-- div里的其它内容 -->
你好
</div>
::before跟::after完全类似，只是它插入的内容会出现在其它内容之前。这两者的区别可以简单描述为：
- 想让插入的内容出现在其它内容前，使用
::before，否者，使用::after。 - 在代码顺序上，
::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。
content的值可以为：
- 字符串：
content: "字符串";– 特殊字符串需要转义或unicode编码。 - 图片：
content: url(/path/to/image.jpg);– 图片会按原尺寸大小的插入，不能改变，因为渐变色实际上也是图像，所以，这些伪元素里也可以使用渐变色。 - 空：
content: "";– 可以用于清除左右浮动元素，也能够用于使用背景图片(这是可以设置高和宽，甚至使用background-size。) - 计数器：
content: counter(li);– 在列表时计算行数非常方便。
需要注意的是，你不能用它们插入HTML(至少这些HTML代码会被转义输出)。content: "<h1>nope</h1>";
双冒号(::)和单冒号(:)的区别
所有支持CSS3的双冒号(::)语法的浏览器都会支持单冒号(:)语法，但IE8只支持单冒号。建议只使用单冒号，以获得最佳的浏览器支持。
双冒号(::)是一种新语法，是用来将伪元素选择器和伪元素区别开。如果不需要IE8支持，就用双冒号(::)吧。