CSS 伪元素

参考

选择器

• ::after
• ::before
• ::file-selector-button
• ::first-letter
• ::first-line
• ::grammar-error
• ::highlight()
• ::marker
• ::placeholder
• ::selection
• ::spelling-error
• ::target-text

该规范还定义了 ::details-content 和 ::search-text 伪元素以及 ::postfix 和 ::prefix 子伪元素。这些尚未被任何浏览器支持。::highlight() 伪元素包含在此模块中，但大多数详细信息在 CSS 自定义高亮 API 中提供。

接口

• CSSPseudoElement 接口
  • CSSPseudoElement.element 属性
  • CSSPseudoElement.type 属性

术语

• 伪元素术语表

指南

CSS 伪元素

所有 CSS 规范和 WebVTT 定义的伪元素按字母顺序排列的列表。

学习：伪类与伪元素

选择器部分中 CSS 构建块的一部分。本文定义了什么是伪元素以及如何将其与伪类结合使用，并用于使用 ::before 和 ::after 伪元素生成内容。

如何使用伪元素创建花式盒子

使用 ::before 和 ::after 伪元素为视觉效果样式化生成内容的示例。

相关概念

• ::backdrop

• Web 视频文本轨道格式 (WebVTT) 提示

  • ::cue
  • ::cue()

• CSS 多列布局模块

  • ::column

• CSS overflow 模块

  • ::scroll-button()
  • ::scroll-marker
  • ::scroll-marker-group
  • :target-current

• CSS 作用域模块

  • :host
  • :host()
  • :host-context()
  • ::slotted()

• CSS 阴影部分模块

  • ::part

• CSS 视图转换模块

  • ::view-transition 实验性
  • ::view-transition-image-pair() 实验性
  • ::view-transition-group() 实验性
  • ::view-transition-new() 实验性
  • ::view-transition-old() 实验性

• CSS 选择器

  • 属性选择器
  • 组合器
  • 类选择器
  • ID 选择器
  • 类型选择器
  • 伪类
  • 通用选择器

• <input> 元素的 placeholder 属性

• :placeholder-shown 选择器

• CSS 生成内容

  • content 属性
  • quotes 属性

• 文本片段

• AnimationEvent.pseudoElement 属性

• KeyframeEffect.pseudoElement 属性

• TransitionEvent.pseudoElement 属性

规范

另见

• 优先级
• CSS 选择器模块
• CSS shadow-parts 模块
• CSS 生成内容模块
• CSS 定位布局模块
• CSS 自定义高亮 API