::marker 伪元素用于修改列表项标记样式，如颜色、字体大小，主要应用于 li 元素；支持 color、font-size 等有限属性，不可设置 margin、padding；可通过 content 配合 counter() 定制有序列表标记，但浏览器支持弱；推荐使用 list-style: none 结合 ::before 实现更灵活的自定义效果。
在CSS中，::marker 伪元素可以用来修改列表项前的标记符号样式，比如改变颜色、字体大小、内容等。它主要应用于 ul、ol 中的 li 元素前面的圆点或数字。
基本语法与支持元素
::marker 只能用于具有自动计数器或默认标记的元素，最常见的就是 li 元素。不能随意用在其他非列表项元素上。
- color
- content（部分浏览器支持）
- font-size、font-weight、font-style
- text-shadow
- white-space
注意：不能设置 width、padding、margin 等布局属性。
修改颜色和字体大小
最常见需求是改变标记的颜色和大小，使其更符合页面设计风格。
立即学习“前端免费学习笔记（深入）”；
示例代码：
li::marker {
color: #e74c3c;
font-size: 1.2em;
font-weight: bold;
}
这样无序列表的圆点或有序列表的数字都会变成红色并加大显示。
自定义标记内容（有限支持）
虽然标准中允许使用 content 更改标记内容，但目前浏览器对 ::marker 使用 content 支持较弱，尤其是无序列表的圆点无法直接替换成文字或图标。
不过对于有序列表，可以通过 counter() 配合 content 实现一些定制效果：
ol li::marker {
content: "第" counter(list-item) "章：";
}
⚠️ 注意：上述写法在多数浏览器中不被支持。更可靠的方式是结合伪元素和计数器自行实现。替代方案：使用伪元素完全自定义
如果需要更强的控制力，比如把项目符号换成图标、emoji 或复杂文本，推荐使用 ::before 并取消默认标记。
ul {
list-style: none; /* 去掉默认圆点 */
padding-left: 0;
}
<p>li::before {
content: "? ";
color: #3498db;
}</p>这种方式兼容性好，灵活性高，适合大多数实际开发场景。
基本上就这些。::marker 是一个轻量级方式美化原生列表标记，但在需要深度定制时，还是推荐用 list-style:none 搭配 ::before 来实现。
