CSS - 偽元素 - ::marker

CSS 中的::marker偽元素用於設定包含數字或專案符號的列表元素的標記樣式。任何設定為display: list-item的元素，例如<li>或<summary>元素。

只有少量 CSS 屬性可與::marker偽元素一起使用，如下所示

所有與字型相關的屬性
white-space
顏色屬性
text-combine-upright
unicode-bidi
方向
內容
所有動畫和過渡屬性

語法

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

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

列印頁面