CSS 伪元素参考手册

CSS 伪元素

CSS 伪元素用于设置元素特定部分的样式。

例如，它可以用于：

设置元素的第一个字母或第一行的样式
在元素内容之前或之后插入内容
设置列表项标记的样式
设置对话框背景视图的样式

下表展示了 CSS 中不同的伪元素：

伪元素	例子	例子描述
`::after`	`p::after`	在指定元素的内容之后插入内容。
`::backdrop`	`dialog::backdrop`	设置对话框或弹出元素背景视图的样式。
`::before`	`p::before`	在指定元素的内容之前插入内容。
`::file-selector-button`	`::file-selector-button`	选择类型为 `<input type="file">` 的按钮。
`::first-letter`	`p::first-letter`	选择每个 `<p>` 元素的第一个字母。
`::first-line`	`p::first-line`	选择每个 `<p>` 元素的第一行。
`::grammar-error`	`::grammar-error`	设置浏览器标记为语法错误的文本样式。
`::highlight()`	`::highlight(custom-name)`	选择自定义高亮。
`::marker`	`::marker`	选择列表项的标记。
`::placeholder`	`input::placeholder`	设置 `<input>` 或 `<textarea>` 元素的占位符文本的样式。
`::selection`	`::selection`	设置用户选中文本的样式。
`::spelling-error`	`::spelling-error`	设置浏览器标记为拼写错误的文本样式。
`::view-transition`	`::view-transition`	表示视图过渡叠加层的根，包含页面上的所有视图过渡。
`::view-transition-group`	`::view-transition-group`	表示单个视图过渡快照组。
`::view-transition-image-pair`	`::view-transition-image-pair`	表示视图过渡的“旧”和“新”视图状态的容器（过渡前后）。
`::view-transition-new`	`::view-transition-new`	表示视图过渡的“新”视图状态。
`::view-transition-old`	`::view-transition-old`	表示视图过渡的“旧”视图状态。