CSS 选择器:::after 和 ::before
27
10 月

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属性。
Chrome Safari Firefox Opera IE Android iOS
2+ 1.3+ 3.5+ 6+ 8+ Yep Yep