什么是伪元素

让我们先看看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 - 使用伪元素给文字自动添加语言说明后缀

CSS代码如下：

div:lang(zh){color:lime;background:#ff0;}

:lang(en) > span{color:#3111d3;}

HTML代码如下：

效果图如下：

• 本例使用伪类:lang来过滤lang属性为特定值（如en-us）的元素。

• 使用伪元素::after来给元素（文本）自动添加语言说明后缀。

通过本例，可以对伪类和伪元素的不同作用有个直观的认识。

例2 - 使用伪元素实现首行着色和段落投影

CSS代码如下：

HTML代码如下：

效果图如下：

• 本例使用伪类:lang来过滤lang属性为特定值（如en-us）的元素。

• 使用伪元素::after来给元素（文本）自动添加语言说明后缀。

例3 - 使用伪元素实现圆环图形

CSS代码如下：

HTML代码比较简单，就一行即可，如下：

<div class="circle"></div>

效果图如下：

注：伪元素默认是inline样式的，通过设置成绝对定位，可强制改变display为block，这样对其设置宽高才能生效。

本例使用伪类:after来实现内圆。

伪类和伪元素的区别

本头条号前面一篇文章《CSS 伪类：用来增强CSS选择器》和本篇文章内容分别讲述了伪类和伪元素的使用，我们应该已经大致理解了两者的异同点，这里再总结一下：

两者都不存在于HTML文档树中，都是为了支持依靠文档树之外的信息来进行格式化。

出于历史兼容性原因，一些在CSS2.1规范之前引入的伪元素使用和伪类一样的语法标记（单冒号:）。

伪类本质上和类相同，是用来选择过滤HTML元素的。只不过伪类是按动态特征过滤，而不是名称、属性或内容。

伪元素本质上和元素相同，是已有元素的某个部分或新创建的补充元素。伪元素上可以应用伪类选择器来过滤。

伪类可以出现在选择器的任何地方，而伪元素只能添加在最后一个简单选择器之后。

附：本文示例的网址：http://www.ikinsoft.com/3ddemo/pseudoelem.html