跳到主要内容

伪元素

::before 和::after​

仅当您定义了 content 属性时，::before 和 ::after 伪元素才会在元素内创建子元素。

content 可以是任何字符串（即使是空字符串），但请注意，屏幕阅读器可能会读出空字符串以外的任何内容。 您可以添加图片 url，它会以原始尺寸插入图片，因此您无法调整其大小。

::first-letter​

并非所有 CSS 属性都可以使用。可用的属性包括：

  • color
  • background 属性（例如 background-image）
  • border 属性（例如 border-color）
  • float
  • font 属性（例如 font-size 和 font-weight）
  • 文本属性（如 text-decoration 和 word-spacing）

::first-line​

仅当已应用 ::first-line 的元素的 display 值为 block、inline-block、list-item、table-caption 或 table-cell 时，::first-line 伪元素才会允许您设置文本第一行的样式。

只能使用一部分 CSS 属性：

  • color
  • background
  • font
  • text

::backdrop​

如果您有以全屏模式呈现的元素（例如 <dialog> 或 <video>），可以使用 ::backdrop 伪元素设置背景幕（元素与页面其余部分之间的空间）的样式

::marker​

借助 ::marker 伪元素，您可以为列表项或 <summary> 元素的箭头设置项目符号或编号的样式。

::selection​

::selection 伪元素可用于设置所选文本的外观。

::placeholder​

可以为表单元素添加辅助提示，例如具有 placeholder 属性的 <input>。可以使用 ::placeholder 伪元素设置该文本的样式。

仅支持部分 CSS 规则：

  • color
  • background
  • font
  • text

::cue​

使用 ::cue 伪元素可以设置 WebVTT 提示（即 <video> 元素的字幕）的样式。

还可以将选择器传递到 ::cue 中，以便设置标题内的特定元素的样式。

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

来源​