使用::marker可自定义有序列表编号样式，支持颜色、字体大小等属性调整，如设置深橙色加粗数字；content替换需谨慎，建议用counter配合::before实现复杂格式。
使用 css::marker 可以轻松自定义有序列表（<ol>）中项目前的编号样式。这个伪元素专门用于控制列表项标记（如数字、字母等）的外观，相比传统方法更灵活直观。
基本语法与作用
::marker 是一个伪元素，应用于 <li> 或其他可生成标记的元素，用来设置列表前面的编号或符号样式。
支持的 CSS 属性有限，主要包括：
- color：改变编号颜色
- content（部分浏览器支持）：替换标记内容
- font-size、font-weight：调整字体大小和粗细
- text-transform：控制大小写等文本变换
修改颜色和字体大小
可以直接通过 ::marker 改变默认数字的颜色和大小：
立即学习“前端免费学习笔记（深入）”；
<font face="Consolas, 'Courier New', monospace">
ol li::marker {
color: #e64a19;
font-size: 1.2em;
font-weight: bold;
}
</font>
这样每个 <li> 前面的序号会变成深橙色并加大显示，视觉上更突出。
自定义计数内容（谨慎使用）
理论上可以使用 content 替换标记内容，但注意：在标准有序列表中修改 content 可能导致原有计数失效或行为异常。
若需完全自定义标记内容（比如加前缀），建议结合 counter-reset 和 counter-increment 手动实现：
<font face="Consolas, 'Courier New', monospace">
.custom-list {
counter-reset: section;
}
.custom-list li {
list-style: none;
}
.custom-list li::before {
counter-increment: section;
content: "Step " counter(section) ": ";
font-weight: bold;
color: #00695c;
margin-right: 8px;
}
</font>
这种方式虽然不用 ::marker，但能更好控制输出格式，适用于复杂场景。
注意事项与兼容性
::marker 目前在主流现代浏览器（Chrome、Firefox、Edge）中支持良好，但在一些旧版本或移动端可能受限。
使用时注意：
- 不能对 ::marker 设置浮动、定位偏移或复杂布局属性
- 不支持添加背景图或边框等装饰性样式
- 避免用它做计数逻辑，仅用于样式修饰
基本上就这些。对于大多数简单需求，直接用 ::marker 调整颜色、大小就很方便；如果要深度定制显示格式，推荐手动计数配合 ::before 实现。
