CSS 中的 ::marker 伪元素用于设置包含数字或项目符号的列表元素的标记的样式。设置为 display:list-item 的任何元素,例如 <li> 或 <summary> 元素。
只有一小部分 CSS 属性可以与 ::marker 伪元素一起使用,如下所示:
- 所有字体相关属性
- white-space
- Color 属性
- text-combine-upright
- unicode-bidi
- direction
- content
- 所有 animation 和 transition 属性
语法
selector::marker {
/* ... */
}
示例
下面是一个 ::marker 伪元素的例子:
<html>
<head>
<style>
ol li::marker {
color: rgb(11, 38, 241);
font-weight: bold;
}
ul li::marker {
content: url('images/smiley.png')
}
body {
line-height: 1.4;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
</style>
</head>
<body>
<h2>Numbered list</h2>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
<h2>Bulleted list</h2>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>

