CSS 伪元素 参考
CSS 伪元素
CSS 伪元素用于为元素的特定部分设置样式。
例如，它可以用于
- 设置元素的第一个字母或第一行的样式
- 在元素内容的前面或后面插入内容
- 设置列表项标记的样式
- 设置对话框后面的视口样式
下表显示了 CSS 中不同的伪元素
| 伪元素 | 示例 | 示例描述 |
|---|---|---|
| ::after | p::after div::after |
在指定元素的内容后面插入某些内容 |
| ::backdrop | dialog::backdrop | 设置对话框或弹出窗口元素后面的视口样式 |
| ::before | p::before div::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 textarea::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 | 表示视图转换的“旧”视图状态 |
