首页 > 编程笔记

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 所示的效果。

推荐阅读

副业交流群 关注微信公众号,加入副业交流群,学习变现经验,交流各种打法。