CSS ::marker 伪元素
更多“自己尝试”的例子见下文。
定义和用法
::marker 伪元素用于样式化列表项标记。
此伪元素适用于任何设置为 display: list-item 的元素。
注意： ::marker 可以使用的属性如下：
- 所有字体属性
- 所有动画属性
- 所有过渡属性
- color
- white-space
- content
- text-combine-upright
- unicode-bidi
- direction
| 版本 | CSS3 |
|---|
浏览器支持
表中数字表示首次完全支持此伪元素的浏览器版本。
| 伪元素 | |||||
|---|---|---|---|---|---|
| ::marker | 86 | 86 | 68 | 18.1 | 72 |
CSS 语法
::marker {
CSS 声明;
}
更多示例
示例
使用 content、color 和 font-size 样式化 <ul> 列表的列表项标记
ul li::marker {
content: "@ ";
color: pink;
font-size: 25px;
}
自己动手试一试 »
示例
将 <h2> 元素设置为 display: list-item，并使用 content 和 color 样式化列表项标记
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 伪元素
