CSS 伪元素 ::marker

CSS 中的 ::marker 伪元素用于设置列表元素标记的样式，其中包含数字或项目符号。任何设置为 display: list-item 的元素，例如 <li> 或 <summary> 元素。

只有一小部分 CSS 属性可以与 ::marker 伪元素一起使用，如下所示:

所有font相关属性
white-space
color属性
text-combine-upright
unicode-bidi
direction
content
所有animation和transition 属性

语法

selector::marker {
   /* ... */
}

CSS ::marker 示例

这是 ::marker 伪元素的示例:

<html> 
<head>
<style>
    ol li::marker {
        color: rgb(11, 38, 241);
        font-weight: bold;
    }

    ul li::marker {
        content: url('/css/images/smiley.png')
    }

    body {
        line-height: 1.4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
</style>
</head>
<body>
    <h2>编号列表</h2>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
    
    <h2> 项目符号列表</h2>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</body>
</html>