CSS 选择器：::after 和 ::before

:after是一种伪元素，它从CSS插入内容到页面中（所插入内容无需在HTML中）。虽然最终它并不在DOM（Document Object Model，文档对象模型）中，但真切地呈现在页面上，如下：

div::after {
    content: "hi";
}

<div>
    <!-- div中的其他内容 -->
    hi
</div>

::before与之类似，但它将内容插入到对应HTML之后。选择::before的一般原因：

• 在位置上，需要将生成的内容插入到元素内容之前。
• ::after将内容插入到目标元素之后，所以::before会在其之前出现。

content的值：

• 字符串： content: "a string"; ——特殊字符需要编码为Unicode实体。详见glyphs page。
• 图片：content: url (/path/to/image.jpg); ——图像默认按原尺寸插入，不会自动调整大小 。尽管渐变应用于实际图片，但伪元素可以应用渐变。
• 空白：content: "";——应用在clearfix上或将插入图片作为背景（设定宽度和高度，甚至可以重置尺寸与背景相匹配）。
• 计数器： content: counter(li); ——对于list非常有用，它直到:marker出现。

需要注意的是，你不能插入HTML代码（将被转义成字符串，不具备HTML语义）。如：content: "<h1>nope</h1>";

: 和 ::

所有支持双冒号（:） CSS3语法的浏览器，也支持单冒号（：），但 IE8 仅支持单冒号，所以为了最佳匹配，建议只使用单冒号。

::是为了将伪内容与伪选择器区分开来的新格式，如果对于IE8的支持无所谓，可以随意使用双冒号。

浏览器支持

小问题：

• Firefox 3.5 不允许伪元素设置绝对定位。
• 在Opera 9.2中，伪元素中始终存在空白。
• IE 8不支持其z-index属性。