CSS ::marker 伪元素
下面还有更多“亲自尝试”示例。
定义和用法
The ::marker 伪元素用于设置列表项标记的样式。
此伪元素适用于设置为 display: list-item 的任何元素。
注意：以下属性可与 ::marker 一起使用：
- 所有字体属性
- 所有动画属性
- 所有过渡属性
- 颜色
- 空白
- 内容
- text-combine-upright
- unicode-bidi
- 方向
| 版本 | CSS3 |
|---|
浏览器支持
表中的数字指定了完全支持此伪元素的第一个浏览器版本。
| 伪元素 | |||||
|---|---|---|---|---|---|
| ::marker | 86 | 86 | 68 | 18.1 | 72 |
CSS 语法
::marker {
css 声明;
}
更多示例
示例
为 <ul> 列表的列表项标记设置内容、颜色和字体大小
ul li::marker {
content: "@ ";
color: pink;
font-size: 25px;
}
亲自尝试 »
示例
将 <h2> 元素设置为 display: list-item，并为列表项标记设置内容和颜色
h2 {
counter-increment: h2;
display: list-item;
}
h2::marker {
display: list-item;
content: "@" counter(h2) " ";
color: lightgreen;
}
body {
counter-reset: h2;
font-family: verdana;
margin: 50px;
}
亲自尝试 »
相关页面
CSS 教程：CSS 伪元素
