11.2 CSS 伪元素（pseudo-elements）
什么是伪元素
让我们先看看W3的伪元素官方定义：
伪元素用来创建HTML文档语言指定之外文档树的抽象层。比如HTML没有提供文档元素内容的首字母或第一行的访问机制。CSS伪元素允许作者引用这些除此之外无法访问的信息。伪元素还提供一种方法来引用不存在于文档中的内容。（比如，
::before和::after）。一个伪元素由2个冒号（
::）加上伪元素的名字所定义。
::标记是CSS2.1新规范中引入的，用来区分伪类（pseudo-classes）和伪元素（pseudo-elements）。但出于现有样式表兼容性原因，用户代理必须也能支持CSS1和CSS2中引入的单冒号伪元素标记（也就是说，:first-line, :first-letter, :before 和 :after）。但是CSS2.1及以后版本新引入的伪元素不支持这种兼容语法。每个选择器中只能出现一个伪元素，并且只能出现在选择器主体的后面。
注意：后续版本可能会允许每个选择器中出现多个伪元素。
从上面的定义，我们可以得知伪元素事实上创建了一个虚拟的元素，在这个虚拟元素上可以应用一般CSS规则乃至伪类选择器。伪元素并不选定（过滤）元素，实际上它们选定（过滤）内容（::first-line,::first-letter）或创建内容（::before,::after，然后包装到一个虚拟容器中，作者可以为此容器添加样式。
尽管理论上使用JavaScript也可以获取第一行文本或第一个字母，但这高度依赖于当前使用的字体家族、字体大小、元素宽度，浮动元素等各种因素，显得相当繁琐。而通过CSS伪元素我们可以方便获得。
伪元素的用途
例子1 - 使用伪元素给文字自动添加语言说明后缀
- 本例使用伪类:lang来过滤lang属性为特定值（如en-us）的元素。
- 使用伪元素::after来给元素（文本）自动添加语言说明后缀。
通过本例，可以对伪类和伪元素的不同作用有个直观的认识。
例子2 - 使用伪元素实现首行着色和段落投影
- 本例使用伪类:lang来过滤lang属性为特定值（如en-us）的元素。
- 使用伪元素::after来给元素（文本）自动添加语言说明后缀。
例子3 - 使用伪元素实现圆环图形
我们在border-radius使用章节演示过如何实现一个圆形和环形，在实现环形时使用了2个嵌套的DIV元素。那么使用伪元素可以节省一个DIV，内圆使用伪元素来替换。
伪元素默认是inline样式的，通过设置成绝对定位，可强制改变display为block，这样对其设置宽高才能生效。
- 本例使用伪类:after来实现内圆。
更多使用伪元素实现的巧妙交互动效，可直接在我们的主站点进行搜索。
伪类和伪元素的区别
前面一节和本节内容分别详细讲述了伪类和伪元素的使用，我们应该已经大致理解了两者的异同点，这里再总结一下：
- 两者都不存在于HTML文档树中，都是为了支持依靠文档树之外的信息来进行格式化。
- 出于历史兼容性原因，一些在CSS2.1规范之前引入的伪元素使用和伪类一样的语法标记（单冒号:）。
- 伪类本质上和类相同，是用来选择过滤HTML元素的。只不过伪类是按动态特征过滤，而不是名称、属性或内容。
- 伪元素本质上和元素相同，是已有元素的某个部分或新创建的补充元素。伪元素上可以应用伪类选择器来过滤。
- 伪类可以出现在选择器的任何地方，而伪元素只能添加在最后一个简单选择器之后。
W3规范相关章节参考阅读
我们把和伪类和伪元素相关的官方规范收集在这里，方便读者集中查询和参考。