CSS中的::before和::after伪元素使用详解

本文并非原创，属于摘抄性质，并有个人的加工。

---

尽管css 规范中包含其他的伪元素，我们焦点是 ::before 和 ::after。因此，为了简便起见，本文所说的“伪元素”泛指这两个特别的伪元素。

伪元素能做什么？

“伪元素”，顾名思义它创建了一个虚假的元素，作为宿主元素的子元素，并插入到宿主元素内容之前或之后。插入的内容在页面的源码里是不可见的，只能在css里可见。

---

使用伪元素有哪些重点注意事项？

伪元素如果没有设置“content”属性，伪元素是无用的。

伪元素本身是作为目标元素的子元素存在的。因为void元素(或是空元素)本身不能嵌套子元素，因此不能为img、input等viod元素应用伪元素。

由于伪元素不是真正的元素，因此它不会出现在DOM中，也就无法用 javascript 直接操作。

插入的伪元素在默认情况下是内联元素（或者，在html5中，在文本语义的类别里）。因此，为了给插入的伪元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素。

典型的CSS继承规则适用于插入的伪元素。例如，宿主元素有字体系列黑体，宋体，无衬线字体，然后伪元素会像其他元素一样继承这些字体系列。同样的，伪元素不会继承没有自然继承自父元素(如 padding and margins)的样式。

伪元素的选择器特殊性与普通元素一样都是 0,0,0,1。

宿主元素相对定位 ，::before 和 ::after 伪元素均绝对定位。在z-index 上::before伪元素和::after伪元素的层叠关系是：::before在下，::after在上。

---

浏览器兼容性

IE8+ 支持伪元素的双冒号写法，其他浏览器都支持。

---

对应用动画的支持

IE10+ 支持伪元素应用动画，其他浏览器都支持。
IE10在使用伪元素应用动画有一个问题：
.test:hover {}
.test:hover::before { /* 这时animation和transition才生效 */ }
需要使用一个空的:hover来激活

---

插入非文本内容

伪元素的content属性值可以是字符串也可以是空字符串。还可以是非文本内容。

伪元素可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样。注意不能使用引号。当然，你可以包含一个Data URI 代替图像引用，正如你可以用css背景一样。

p:before {
    content:url(image.jpg);
}

你还可以选择ATTR(X)中的函数的形式。此功能，根据规范，“把X属性的值以字符串的形式返回”。attr（）函数的功能是什么？它得到宿主元素特定属性的值，并把该值作为插入的文本。

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

---

附：为伪元素应用过渡动画

---

参考资料