首页 > 编程笔记
CSS ::before和::after伪元素选择器的用法
伪元素选择器是一种很常用的选择器,在实际工作中会被经常用到。
所谓“伪”元素,就是在 DOM 结构中本来不存在,但是通过 CSS 创建出来的元素。
最重要的两种伪元素选择器是 ::before 和 ::after,它们用于向指定元素的前面或者后面加入特定的内容。由于 CSS 基本上都是在 HTML 文件定义的 DOM 结构上选择对象,然后设置样式,几乎没有办法改变 DOM 结构,因此这两个伪元素选择器为开发人员提供了通过 CSS 来改变内容的一种有效途径。
例如下面的代码:
图 1 通过::before伪元素选择器插入文字
可以看到在代码中,6 个 p 元素的内容只是台词内容,并没有“甲”和“乙”的人物提示。通过使用伪元素,就在每一个段落的前面自动加入了人物提示。
具体来说,p:nth-of-type(odd)::before 的作用是先选中单数行的 p 元素,然后指定它前面的伪元素内容。用 content 指定加上“甲:”。同理,后面再在所有双数行前面加上“乙:”,这样就实现了图 1 所示的效果。
所谓“伪”元素,就是在 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 所示的效果。