来源 | https://javascript.plainenglish.io/9-css-pseudo-elements-you-didnt-know-about-bb0faa395986

伪::selection元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其外观的方法。这是一个例子：

    

     

      

      

      

      

     
     
::selection {  background-color: yellow;  color: red;}
    

伪::first-letter元素允许您设置块级元素首字母的样式。当您想将特殊格式应用于段落或标题的初始字符时，它会派上用场。这是一个例子：

    

     

      

      

      

      

     
     
p::first-letter {  font-size: 2em;  color: red;}
    

与 类似::first-letter，::first-line伪元素以文本或块级元素的第一行为目标。您可以使用此伪元素将特定样式应用于段落或标题的起始行。这是一个例子：

    

     

      

      

      

      

     
     
p::first-line {  font-weight: bold;  text-decoration: underline;}
    

伪::marker元素以列表项的标记为目标，例如无序列表中的项目符号点或有序列表中的数字。使用此伪元素，您可以自定义标记的外观。这是一个例子：

    

     

      

      

      

      

     
     
li::marker {  color: blue;  font-weight: bold;}
    

伪元素::placeholder允许您在输入字段和文本区域中设置占位符文本的样式。通过将自定义样式应用到占位符，您可以增强用户体验并使其与您的整体设计保持一致。这是一个例子：

    

     

      

      

      

      

     
     
input::placeholder {  color: #999;  font-style: italic;}
    

伪元素以or元素::cue的提示文本为目标。提示文本通常用于多媒体内容中的字幕或副标题。使用此伪元素，您可以将样式专门应用于提示文本。这是一个例子：<audio><video>

    

     

      

      

      

      

     
     
video::cue {  color: white;  background-color: black;}
    

和伪元素允许您分别设置标记为语法或拼写错误的文本部分的样式::grammar-error。::spelling-error当内容中存在错误时，这些伪元素可用于向用户提供视觉提示。这是一个例子：

    

     

      

      

      

      

      

      

      

      

      

     
     
p::grammar-error {  text-decoration: line-through;  color: red;}
p::spelling-error {  text-decoration: underline;  color: blue;}
    

伪::backdrop元素与全屏 api 结合使用，以在全屏模式下自定义元素背后的背景。它允许您将默认的黑色背景更改为自定义颜色或样式。这是一个例子：

    

     

      

      

      

     
     
video::backdrop {  background-color: gray;}
    

如果浏览器支持文本片段，则CSS::target-text伪元素表示已滚动到的文本。它允许作者选择如何突出显示该部分文本。这是一个例子：

    

     

      

      

      

      

     
     
::target-text {  background-color: rebeccapurple;  color: white;}
    

CSS 伪元素为元素的特定部分设置样式和增强网页的视觉吸引力提供了广泛的可能性。您无需过多的 JavaScript 代码即可实现令人印象深刻的样式效果。

学习更多技能

请点击下方公众号