跳到主要内容

伪元素

::before & ::after​

在此类选择器中定义 content 属性将会创造一个子元素。

content 可以是任何字符串、图片 url 或者一个 counter 。

使用该伪元素前提是元素应当可以拥有文档树（比如 <img /> 就没有）。

::first-letter​

::first-letter 选中第一个字母。可用的属性有：

  • color

  • background 相关属性

  • border 相关属性

  • float

  • font 相关属性

  • text 相关属性，比如 text-decoration 和 word-spacing

::first-line​

::first-line 选中第一行。可用的属性有：

  • color

  • background 相关属性

  • font 相关属性

  • text 相关属性

::backdrop（实验性）​

该伪元素用来设置一些全屏元素，比如 <dialog> 或 <video> 等。

::marker​

::marker 为列表（或 <summary> ）标记选择器。

ul ::marker {
  font-size: 1.5em;
}

::selection​

::selection 被用户选中的文本。

::selection {
  background: green;
  color: white;
}

可设置的属性有：

  • color

  • background-color

  • cursor

  • outline

  • text 相关属性

::placeholder​

::placeholder 表单占位符元素。

可设置的属性有：

  • color

  • background 相关属性

  • font 相关属性

  • text 相关属性

参考​

Pseudo-elements，Learn CSS - web.dev

counter - MDN

content - MDN

outline - MDN

::cue(:cue) - MDN