::after 作为伪元素,是元素最后一个抽象子节点

使用 ::after 可以在元素中插入内容,内容可以用 content 属性定义。

举例来说,假设你想加一个分享icon到站点的所有外链上,这个icon可以添加到链接的前面或者后面。体验上用户很清晰就明白这是个外链。我们可以使用 .external::after 顶一个这个icon。

Let's <a href="http://movethewebforward.org/" class="external">Move The Web Forward</a> together!
.external::after {
    content: url(external-link.png);
    padding-left: 5px; /* create some space between the image and the content before it */
}

使用content属性图片就被添加进去了,但是使用伪元素添加的图片不能改变大小。

完整代码如下:

通过伪元素插入元素的内容,一般只有chrome32+和firefox可以看到伪元素在DOM中的确切信息,选中伪元素后可以查看它的长宽等信息,我们看一下demo。

inspecting-after

以上demo展示通过 ::after 添加的内容是行内(inline)的。

由于 ::after 内容是插入到元素的其它内容后面的,这也意味着伪元素可以通过定位的方式覆盖前面的内容。

伪元素可以用来插入任意形式的内容,包括字符(一般为字体)、文本、图片等,以下内容都是有效的。

.element::after {
    content: url(path/to/image.png); /* an image, for example, an icon */
}

.element::after {
    content: "(To be continued...)"; /* a string */
}

.element::after {
    content: "\201C"; /* also counts as a string. Escaping the unicode; renders it as a character */
}

::after 内容可以设置为空,一般用来清除浮动。Nicolas Gallagher写的 micro clearfix hack 就是通过::after 和 ::before 清除元素内部的浮动。

::after 可以被定义其它的属性如floated, positioned, animated(动画需要看浏览器的支持情况)。

综上,伪元素有很多真实元素所具有的属性,它们一般被用作创建几何形状。以下demo创建了一个八角形,真实元素是一个正方形,伪元素是一个45度角正方形。

/* 
    The element and its pseudo-element are both made translucent using the `opacity` property in order to better visualize how the two are positioned in the demo. 
    By removing the opacity values, you can see a fully opaque eight-point star 
*/
.element {
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    position: relative;
    margin: 100px auto;
}

.element:after {
    content: "";
    position: absolute;
    display: block;
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    transform: rotateZ(45deg);
}

由于伪元素被用作辅助元素,所以它的 content 一般设置为空。

这个demo也可以用 ::before 来实现。

细节 & 注释

(:) 和 (::) 的区别

CSS1 和 CSS2 中伪元素一般用一个冒号(:),就像伪类(:hover),css3中为了区分伪元素和伪类,使用了两个冒号(::)。

/* old CSS2 syntax */
.element:after {
    /* content and styles here */
}

/* new CSS3 syntax */
.element::after {
    /* content and styles here */
}

支持(::)的浏览器都支持(:),IE8还不支持(::)

辅助学习

伪元素并不是真实的元素,所以与文章内容强相关的内容不建议用,一般作为辅助用途。

其次,因为它不是真实的节点,所以无法监听javascript事件。

例子

我们可以用伪元素创建很多的实例和特效,以下实例我们可以参考一下:

使用伪元素定义print样式

print样式中伪元素很有用,一般打印出来的不会带链接,所以我们可以通过在print中加入伪元素来实现展示出该链接。

@media print {
    a[href]::after {
        content: " (" attr(href) ")";
    }
}

以上包含了多个 css 的概念:属性选择器(a[href])、content 属性、attr()函数。

  • 属性选择器会选择页面上所有带href属性的a元素
  • attr(href) 函数返回a元素href中的内容

以下demo展示了这篇文章大部分的知识点:

Live Demo

以下demo通过 ::after 创建了一个箭头

移上去时,箭头会上下翻转。li:hover::after 这种方式也是可行的,因为可以写成链式。

浏览器支持

(:) Chrome, Firefox, Safari, Opera, Internet Explorer 8+,Android,iOS。

(::) Chrome, Firefox, Safari, Opera, Internet Explorer 9+,Android,iOS。

(支持动画的::) Chrome 26+, Firefox 4+, Safari 6.1+, Opera, Internet Explorer 10+。

IE不支持伪元素上加z-index。

更多阅读

本文翻译自:https://tympanus.net/codrops/css_reference/after/

翻译者:http://www.17shulihua.com

未经允许不得转载