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 | 表示视图转换的“旧”视图状态 |
