CSS 伪元素选择器

CSS 伪元素选择器，用于选择特定 HTML 元素的特定部分，这个部分在 HTML DOM 中是不存在的，但是可以通过 CSS 来设置它们的内容和样式。常用的 CSS 伪元素有如下两种：

• ::before - 在元素之前插入内容，并设置其样式。
• ::after - 在元素之后插入内容，并设置其样式。

这里要注意的是，与伪类选择器不同，伪元素选择器前面有两个冒号：::，目的是为了和伪类选择器区分开。接下来分别看一下它们的用法。

::before

::before 用于选择 HTML 元素之前的部分，等于在这个元素的前边再创建一个邻居节点，我们可以通过 content 属性来设置它的内容，例如下方代码所示：

<style>
  h1::before {
    content: "第 1 章 ";
  }
</style>

<h1>CSS 完全指南</h1>

预览：

示例中，选择了 h1 的 ::before 伪元素，并设置了 content 属性为 "第 1 章 "，这样就可以在 h1 前面，插入 "第 1 章 " 字样。这时，如果查看谷歌开发者工具，会发现，在 h1 前面，有了一个邻居节点，名字为 ::before，我们点击它可以查看它的样式：

利用 ::before 伪元素，可以创建多种多样的效果，并且可以省略一些不必要的 HTML 元素。需要注意的是，在设置 ::before 或后面要介绍的 ::after 伪元素时，必须要设置 content 属性，浏览器才会真实的创建这个元素。

::after

::after 伪元素选择器和 ::before 伪元素选择器的用法一样，只是它在所选择的 HTML 元素的下方创建一个邻居节点。例如，要给一系列的超链接的后面添加一个 emoji 指示箭头，代码如下：

<style>

  a {
    display: block;
  }

  a::after {
    content: "→";
  }
</style>

<nav>
  <a href="javascript:void(0)">超链接1</a>
  <a href="javascript:void(0)">超链接2</a>
  <a href="javascript:void(0)">超链接3</a>
</nav>

预览：

可以看到，→ 这个箭头就追加到每个 a 元素的后面了。

小结

::before 和 ::after 是最常用的伪元素选择器，使用它们可以减少 HTML 元素的数量，提高代码的可读性，并且可以更好的利用 CSS 来实现效果。例如，给元素添加装饰，构造复杂的图形，设置动画等等。