CSS伪元素::marker允许开发者直接对列表项的标记符号（如无序列表的圆点、有序列表的数字）进行样式定制，不需要额外修改HTML结构，就能实现更灵活的列表样式效果。
::marker伪元素的基本语法
::marker伪元素需要匹配到列表项的标记盒子，通常直接作用于<li>元素，也可以作用于设置了display: list-item的元素。基本语法格式如下：
/* 作用于所有li元素的标记 */
li::marker {
color: #ff5722;
font-size: 1.2em;
}
/* 作用于类名为custom-list的列表项标记 */
.custom-list li::marker {
content: "✦";
}
::marker支持设置的样式属性
和其他伪元素不同，::marker仅支持部分特定的CSS属性，主要包括以下几类：
- 内容相关：
content，用于自定义标记的内容，可设置为字符串、计数器值等 - 文本样式：
color、font-size、font-weight、font-family等 - 间距相关：
margin、padding等盒模型属性（部分浏览器支持有限）
需要注意，background、border等属性目前不被::marker支持，如果需要更复杂的效果，可能需要结合其他方案实现。
不同类型列表的定制示例
无序列表符号定制
默认无序列表的标记是实心圆点，我们可以通过::marker修改其颜色和形状：
<ul class="custom-ul">
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
.custom-ul li::marker {
content: "•"; /* 也可以设置为其他字符，如"→" */
color: #2196f3;
font-size: 1.5em;
font-weight: bold;
}
有序列表符号定制
有序列表默认使用数字作为标记，我们可以修改数字的样式，也可以自定义标记内容：
<ol class="custom-ol">
<li>第一步操作</li>
<li>第二步操作</li>
<li>第三步操作</li>
</ol>
.custom-ol li::marker {
color: #4caf50;
font-weight: 700;
font-family: "Courier New", monospace;
}
/* 自定义有序列表标记内容，使用计数器 */
.custom-ol {
counter-reset: step;
}
.custom-ol li {
counter-increment: step;
}
.custom-ol li::marker {
content: "步骤" counter(step) "、";
}
使用注意事项
- ::marker仅对
display属性为list-item的元素生效，普通块级元素使用该伪元素不会有任何效果 - 部分旧版本浏览器对
::marker的支持不完善，使用前建议确认目标用户的浏览器兼容情况 - 如果同时设置了
list-style-type和::marker的content属性，::marker的content优先级更高 - 不要在
::marker中设置不支持的属性，否则这些属性会被浏览器忽略，不会产生预期效果
和传统列表样式设置的区别
传统的列表样式通过list-style-type、list-style-image等属性设置，存在一定局限性：list-style-image无法调整图片的大小和位置，list-style-type只能选择预设的符号类型。而::marker伪元素可以单独控制标记的颜色、字体、内容，灵活度更高，也不需要额外引入图片资源，减少了页面请求。
总结来说，
::marker伪元素是实现列表符号轻量定制的优质方案，适合大多数不需要复杂标记效果的场景，开发者可以根据实际需求选择使用。