首页 > 编程笔记

CSS ::before和::after伪元素选择器的用法

伪元素选择器是一种很常用的选择器，在实际工作中会被经常用到。

所谓“伪”元素，就是在 DOM 结构中本来不存在，但是通过 CSS 创建出来的元素。

最重要的两种伪元素选择器是 ::before 和 ::after，它们用于向指定元素的前面或者后面加入特定的内容。由于 CSS 基本上都是在 HTML 文件定义的 DOM 结构上选择对象，然后设置样式，几乎没有办法改变 DOM 结构，因此这两个伪元素选择器为开发人员提供了通过 CSS 来改变内容的一种有效途径。

例如下面的代码：

<!DOCTYPE html>
<html>
<head>
     <style>
         p:nth-of-type(odd)::before {
             content:"甲：";
         }
         p:nth-of-type(even)::before {
             content:"乙：";
        }
    </style>
</head>
<body>
    <h1>《正反话》</h2>
    <p>相声是一门语言艺术。</p>
    <p>对。</p>
    <p>
      相声演员讲究的是说学逗唱，这相声演员啊，最擅长说长笑话、短笑话、俏皮话、反正话。
    </p>
    <p>这是相声演员的基本功啊。</p>
    <p>相声演员啊，脑子得聪明。灵机一动，马上通过嘴就要说出来。</p>
    <p>对对对对。</p>
</body>
</html>

效果如下图所示：

图 1 通过::before伪元素选择器插入文字

可以看到在代码中，6 个 p 元素的内容只是台词内容，并没有“甲”和“乙”的人物提示。通过使用伪元素，就在每一个段落的前面自动加入了人物提示。

具体来说，p:nth-of-type(odd)::before 的作用是先选中单数行的 p 元素，然后指定它前面的伪元素内容。用 content 指定加上“甲：”。同理，后面再在所有双数行前面加上“乙：”，这样就实现了图 1 所示的效果。

CSS ::before和::after伪元素选择器的用法

推荐阅读