::after

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 ，或者直接将它留空。

内容为空的伪元素经常用来清除浮动。例如中使用 ::after 和 ::before 伪元素来清除容器中的浮动。

我们也可以为 ::after 伪元素设置样式：它可以进行，，甚至制作。

所有通过 ::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浏览器不支持在伪元素上使用属性。

查看更多关于::after的详细内容...