CSS - 伪元素 - ::marker

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>

打印本页