跳到主要内容位置

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,我们点击它可以查看它的样式:

img

利用 ::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 来实现效果。例如,给元素添加装饰,构造复杂的图形,设置动画等等。