::marker 伪元素可用于自定义列表标记的颜色、字体等样式，如设置红色加粗数字或项目符号；但不支持 content 属性，无法直接插入自定义符号或计数内容，需改用 list-style: none 配合 ::before 实现复杂效果；对于有序列表的计数定制，应使用 counter-increment 与 ::before 结合；嵌套列表中可通过层级选择器调整不同层的标记样式，提升可读性。
CSS 的 ::marker 伪元素允许我们自定义列表项前的标记符号，比如有序列表（<ol>）中的数字或无序列表（<ul>）中的圆点。通过它，可以轻松改变颜色、大小、内容等样式，而无需修改 HTML 结构。
改变默认标记的颜色和字体
使用 ::marker 可以为标记设置颜色、字体粗细等基本样式，不影响列表项其余内容。
li::marker {
color: #e74c3c;
font-weight: bold;
}
上面代码会让所有 <li> 元素前面的标记变成红色加粗。适用于 <ol> 的数字或 <ul> 的项目符号。
用 content 模拟自定义符号（仅限简单场景）
::marker 不支持 content 属性，不能像 ::before 那样直接插入文本或图标。但可以通过其他方式间接实现类似效果。
立即学习“前端免费学习笔记（深入）”；
若想使用自定义符号（如 ✓、★），建议改用 ::before 并配合 display: list-item 或取消默认列表样式：
ul.custom {
list-style: none;
padding-left: 0;
}
<p>ul.custom li {
position: relative;
padding-left: 20px;
}</p><p>ul.custom li::before {
content: "★";
color: gold;
position: absolute;
left: 0;
}</p>这种方法更灵活，虽然不再使用 ::marker，但在需要图标或复杂符号时是标准做法。
控制有序列表的计数样式
虽然 ::marker 本身不能修改计数逻辑，但结合 counter-reset 和 counter-increment 可以实现高级定制。
ol {
counter-reset: step-counter;
list-style: none;
}
<p>ol li {
counter-increment: step-counter;
}</p><p>ol li::marker {
content: counters(step-counter, ".") ". ";
color: blue;
}</p>注意：上述 content 写法在 ::marker 中无效 —— 因为 ::marker 不支持 content。正确做法是使用 ::before 来显示自定义计数：
ol li::before {
content: counter(step-counter) ". ";
color: blue;
}
适配不同层级列表的样式
嵌套列表中，::marker 会自动继承默认行为（如数字、字母、罗马数字）。可通过选择器分别设置不同层级的样式：
/* 第一层 */
ol > li::marker {
color: #2c3e50;
font-size: 1.1em;
}
<p>/<em> 第二层 </em>/
ol ol > li::marker {
color: #7f8c8d;
font-variant-numeric: tabular-nums;
}</p>这样可以让深层列表的标记更小或颜色更浅，增强可读性。
基本上就这些。::marker 适合做颜色、字体等简单修饰，复杂自定义建议搭配 list-style: none 和 ::before 实现。不复杂但容易忽略的是它对 content 的限制。
