: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 |
没有评论