手册目录
CSS教程手册
CSS高级
CSS基础教程
CSS中级教程
CSS3高级教程
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 | 表示视图过渡的“旧”视图状态。 |
相关视频
科技资讯
24小时阅读榜
1
2
3
4
5
6
7
8
9
10
精品课程
共5课时 | 17.4万人学习
共49课时 | 78.2万人学习
共29课时 | 62.5万人学习
共25课时 | 39.7万人学习
共43课时 | 73.8万人学习