::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支持,就用双冒号(::)吧。
浏览器支持情况
都是一些小问题:
- Firefox 3.5- 不支持伪元素的绝对定位。
- Opera 9.2里,伪元素里的空格会显示,如同在
pre
里一样。 - IE 8 不支持伪元素里的
z-index
以前在处理内部层浮动,外部层高度不能自适应都是采用这种方法http://blog.csdn.net/cysear/article/details/47083675
发现好用但是不适用,使用伪元素可以解决这个冗余空标签的问题
<style>
div {
border: 1px solid #ccc;
}
.y-clearfix:before, .y-clearfix:after {
content: "\0020";/*空格的意思*/
display: block;
height: 0;
overflow: hidden;
clear: both;
}
</style>
<div class="y-clearfix">A
<div style="float: left;height: 50px;">B</div>
</div>
在 clearfix 中,content 的内容可以为空,即 {content: ""; ...} ,据说兼容性更好。
![](https://i-blog.csdnimg.cn/blog_migrate/e00556d4b8e8ec8a246ded4bf904af3d.gif)