CSS - 伪元素 - ::marker

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

只有少量 CSS 属性可与::marker伪元素一起使用，如下所示

所有与字体相关的属性
white-space
颜色属性
text-combine-upright
unicode-bidi
方向
内容
所有动画和过渡属性

语法

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

CSS ::marker 示例

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

Open Compiler

<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>

打印页面