共计 2382 个字符,预计需要花费 6 分钟才能阅读完成。
CSS ::after
伪元素用于在被选择的元素之后插入由 content
属性指定的内容。
::after
伪元素是一个虚拟元素,它默认是内联元素。它通常配合 content
属性来一起使用,content
属性为该虚拟元素提供内容。
例如,如果你想在一个超链接后面添加一个小图标 ,我们就可以通过 ::after
伪元素来实现。
<a href="#" class="with_link_icon"> 这是一个超链接 </a> 通过::after 伪元素在后面插入了一个图标。
.with_link_icon:after{content: url(img/link.png);
}
上面的代码将得到下面的结果:
这是一个超链接 通过
::after
伪元素在后面插入了一个图标。
::after
伪元素可以插入任何的内容:文字,图片等。例如下面都是有效的内容:
.element::after {
/* 插入一幅图片 */
content: url(path/to/image.png);
}
.element::after {
/* 插入文字 */
content: "(测试文字...)";
}
.element::after {
/* 插入 unicode 字符 */
content: "\201C";
}
.element::after {
/* 空内容 */
content: "";
}
另外,content
中的内容还可以是一个 CSS counter
,或者直接将它留空。
内容为空的伪元素经常用来清除浮动。例如 micro clearfix hack 中使用 ::after
和::before
伪元素来清除容器中的浮动。
我们也可以为 ::after
伪元素设置样式:它可以进行 浮动 , 定位,甚至制作animation 动画。
所有通过 ::after
伪元素添加的元素不会被插入到 DOM 中,它们只是有视觉上的效果。因此,屏幕阅读器不会识别由 ::after
伪元素产生的内容。最佳实践是:不要使用 ::after
伪元素来制作重要的内容。
由于伪元素的内容不会被插入到 DOM 中,所以你不能使用 JavaScript 为伪元素附加任何的事件。
关于 :after
和::after
的区别
在别人书写的 CSS 代码中,你可能经常看到有人使用 :after
作为伪元素,而有一些人则使用 ::after
作为伪元素。它们之间有什么区别呢?
在 CSS1 和 CSS2 规范中,伪元素通过一个冒号 :
来定义,例如 :hover
。在 CSS3 规范中,使用双冒号::
语法来表示伪元素(pseudo-elements),以区别于伪类(pseudo-classes)。
/* 旧的 CSS2 语法 */
.element:after {/* */}
/* 新的 CSS3 语法 */
.element::after {/* */}
只要是支持双冒号语法的浏览器都支持单冒号语法。IE8 不支持双冒号语法,如果你要支持 IE8 浏览器,建议使用单冒号语法。
示例代码
:after
伪元素通常用于制作一些几何图形。例如下面的代码使用 :before
和:after
伪元素来制作一颗红心。
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #B10B14;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
浏览器支持
支持单冒号语法的 :after
伪元素的浏览器有:Chrome, Firefox, Safari, Opera, Internet Explorer 8+ 以及 Android 和 iOS。
支持双冒号语法的 ::after
伪元素的浏览器有:Chrome, Firefox, Safari, Opera, Internet Explorer 9+ 以及 Android 和 iOS。
支持伪元素动画的浏览器有:Chrome 26+, Firefox 4+, Safari 6.1+, Opera (post Blink) 和 Internet Explorer 10+。
IE 浏览器不支持在伪元素上使用 z-index 属性。