::before和::after伪元素的用法

发表于   |   分类于   |  

背景

  1. 伪元素是什么？
    下面是 MDN 给出的定义：

    Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

    大概意思是这样的：语法上，伪元素跟伪类一样是添加到 CSS 选择器后面的；但是在用法上，伪类用于在元素处于某种状态时（例如被点击），对元素的样式进行操作。而伪元素是对元素的某个特定部位进行样式操作或者内容添加，例如 ::first-line 就指定了该元素的第一行。

  2. 为什么会有 :before 和 ::before 这两种写法？
    简单来说在 CSS3 之前，伪类和伪元素都用单冒号，CSS3规定伪类必须用单冒号，伪元素必须用双冒号，所以主要是兼容性的问题，目前为止 IE6，7，8 均不支持双冒号的用法。
    详细解释看此文章：What’s the Difference Between “:before” and “::before”?

  3. 伪元素有很多种，这里我们只讨论::before和::after这两种伪元素，所以下文提到的伪元素特指这两种伪元素。

用法

下面分别是 MDN 对::before和::after的定义

::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the “content” property. This element is inline by default.

::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the “content” CSS property. This element is inline by default.

大概意思是，::before和::after伪元素分别代表的是当前元素的第一个和最后一个 子元素（虚拟的，该子元素并不存在于 DOM 中，只能在 CSS 中看到），通常可以用其 content 属性来为当前元素添加 修饰性 的内容（添加的内容视为匿名的置换元素），并且该子元素默认为 内联元素。

基本语法

.an-element::after {
	content:"#";
}
.an-element::before {
	content:"#";
}

以上代码分别在 class 属性为 an-element 的元素的前后添加了一个符号。我们可以从定义中看到，这两种伪元素的作用主要是通过其特有的 content 属性为当前元素添加修饰性内容，所以当我们没有设置 content 属性时，该伪元素是无用的，至少你应该将 content 属性值设置为空 content="";，将该伪元素作为一个没有内容的盒子用。

content 属性值的类别

  1. string， 插入字符串（文本内容）
    文本内容为常量，需要用单引号或双引号括起来
    代码实现如下：

    h1::before {
    	content: "Chapter";
    }
    #new::after {
    	content: "new";
    	color: red;
    }

    如果要插入特殊字符，需要将其转义，CSS转义序列与HTMl/XHTML字符实体类似。字符实体是以“&”符号开始的，后面跟有字符的名称或十进制值（后者要使用“#”值后缀），将反斜杠（\）加上十六进制字符则是 CSS 转义序列，从此可以创建同样的字符。序列“\A”与字符实体“&#010”是相同的。字符集

  2. attr， 调用当前元素的属性值
    可以方便地将链接的 href 地址显示出来, 也就是说可以动态地从页面元素中提取内容

    a::after {
    	content: "(" attr(href) ")";
    }

    字符串的连接不需要加号，上面代码 content 属性值就是由三部分组成：两个常量圆括号和一个提取值

  3. url， 使用指定的绝对或相对链接插入一个外部媒体文件

    h1::before {
    	content: url(logo.png) "标题";
    	font: x-small Arial, freeSans, sans-serif;
    	color: gray;
    }

    上面的代码，在标题前面插入一个图标和文本

  4. none， 不生成任何值
    可以用来清除浮动
    .clearfix::after {
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
     clear: both;
    }
    .clearfix {
     *zoom:1;
    }

本文参考：
[1]https://developer.mozilla.org/en-US/docs/Web/CSS/content
[2]http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html
[3]http://www.w3cplus.com/solution/css3content/css3content.html
[4]http://blog.dimpurr.com/css-before-after/