最开始学习前端的时候，我见到过一个很奇怪的表达，:before 和 :after，后来知道这个是伪元素，但是没有对其深究。后来再看一些网页源码的时候，还发现另外一个表达，就是 ::before 和 ::after，当时还在一些微信的技术群里问过大家两个冒号和一个冒号有什么区别。现在也都已经忘记大家怎么说的了。最近做项目的时候，使用 icon-font 的时候又多次见到这样的表达方式，所以就留意深入了解了一下伪元素。这里就把这个伪元素的一些内容做个总结。

官方解释

根据官方的说法，伪元素有四种，分别是 :first-line / :first-letter / :before / :after。这里我们主要以 :before 和 :after 为例来进行说明。

:before 和 :after 是类似的，所以下面所有的例子都是以 :before 为例来说明。

W3CSchool 说，:before 伪元素可以在选定元素的内容前面插入新的内容。注意，官方给定的说法也是插入“内容”。而这个内容可以是文本也可以是图片等等。例如，官方的例子：

h1:before {
    content: url(logo.gif)
}

可以看到，这个伪元素是通过一个特殊的属性——content 来插入图片或者文字内容。上面是插入图片的写法， content 也可以是文字，如：

div.test:before {
    content: 'before test'
}

这个时候在页面上就会显示这段文字，很多时候，我们使用 icon-font 用的就是这种方式，很多 icon 就是使用伪元素来添加的。

官方还有一段解释，如下

默认的地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

所以说这个伪元素主要的用途就是添加一些内容文字，或者图片，而且插入的内容是行内样式。关于这个解释还觉得不够明确的话，可以看 webplatform.org 的英文解释，这个伪元素的用途就更加明确了。

::before creates a pseudo-element, which allows you to insert content onto a page from CSS before the selected element(s).

可见，这个伪元素是通过 CSS 来添加 html 内容的一种方式。

除了上面这些说明之外，我们经常还会有疑问的一点就是，会见到不同的伪元素表达方式，有时候是两个冒号，有时候是一个冒号，到底是怎么回事呢？我们继续看 webplatform.org 上的解释。

In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :before. Beginning with Windows Internet Explorer 9, the ::before pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form. Microsoft and the World Wide Web Consortium (W3C) encourage web authors to use the two-colon form of the ::before pseudo-element.

上面这段话的大概意思就是说，IE8及以前的版本都是用一个分号，但是从 IE9 开始，使用规范要求使用两个分号，但是也兼容一个分号的写法，但是鼓励大家使用两个分号。所以，:before 和 ::before 的写法都是一样的，只不过是因为规范发生变化而导致的两种不同的写法。如果想兼容的话还是使用 :before 的写法就好了。

实例

我见过的伪元素通常用在两个方面：

1. 插入 icon-font 的小图标。
2. 或者使用 :after 伪元素来 clear: both。实现块状格式化上下文（BFC）。

当然，关于伪元素的其他用法，可以参考大放异彩的伪元素这篇文章。