css的伪元素::after和::before的使用

::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，基本下的效果是这样的：

CSS代码

div::after{

content:"你好";

}

HTML代码

<div>

  <!--div的内容-->

你好

</div>

::before跟::after完全类似，指示它插入的内容会出现在其他内容之前。这两者的区别可以简单描述为：

1、想让插入的内容出现在其他内容之前，使用::before，否者，使用::after。

2、在代码顺序上，::after生成的内容也比::before生成的内容靠后，如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

3、字符串：content:"字符串",特殊自趺床需要转义或unicode编码。

4、图片： content:url(/path/to/images.jpg);图片会按原尺寸大小的插入，不能改变，因为渐变色实际上也是图像，所以，这些伪元素里也可以使用渐变色。

5、空：content:"";可以用于清除左右浮动元素，也能够用于使用背景图片（这是可以设置高和宽，甚至使用background-size）

6、计数器：content:content(li)； 在列表时计算行数非常方便。

需要注意的是，你不能用他们插入HTML（至少这些HTML代码会被转义输出）content:"<h1>hello</h1>"；

双冒号（：：）和单冒号（：：）的区别

所有支持css3的双冒号语法的浏览器都会支持单冒号的语法，但IE8只支持单冒号。建议只使用单冒号，以获得最佳的浏览器支持。

双冒号市一中新语法，是用来将伪元素选择器和伪元素区别开，如果不需要IE8支持，就用双冒号

浏览器支持情况：

1、Firefox 3.5- 不支持伪元素的绝对定位。

2、Opera9.2，伪元素的空格会显示，如同在pre一样。

3、IE8不支持伪元素里的z-index。