ol列表无法用list-style-image设置图标序号，因该属性仅作用于ul；::marker是现代标准方案，支持SVG图标、颜色继承和语义化读取；兼容旧浏览器需用li::before+list-style:none。
ol列表里不能直接用list-style-image设图标序号
很多人试过 list-style-image: url(icon.png)，结果发现图标根本不出现在序号位置——因为 list-style-image 只作用于 ul 的项目符号，对 ol 的数字序号完全无效。浏览器会静默忽略这条声明，也不报错，容易误以为是路径或尺寸问题。
::marker 是现代 ol 自定义图标最干净的方案
::marker 伪元素专为列表项的标记（即序号）设计，2026年主流浏览器（Chrome 86+、Firefox 89+、Safari 15.4+）已稳定支持，且天然适配缩放、颜色继承和 SVG 填色。
- 必须写在
li::marker上，不能写在ol或li本身 - 用
content: url(...)引入图片或内联 SVG；SVG 推荐用fill="currentColor"，方便后续用color控制图标色 -
font-size会等比缩放图标，比固定width/height更健壮 - 不破坏语义，屏幕阅读器仍能正确读出“第1项”“第2项”等逻辑序号
li::marker {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 12 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
font-size: 1.1em;
color: #007bff;
}
兼容老浏览器时用 ::before + list-style: none
如果要支持 IE11 或旧版 Android WebView，::marker 不可用，得退回到 ::before 方案。关键点不是“能不能加图标”，而是“怎么不破坏原有编号语义和布局流”。
- 先清除原生序号：
ol { list-style: none; }，否则图标和数字会重叠 - 给
li加position: relative，再让li::before绝对定位到左侧 - 别用
margin-left推内容——它会让长文本换行后顶到图标下方；用padding-left预留空间更稳 - 图标尺寸用
em单位，随父级字体缩放，避免硬编码像素值
为什么不用 value 属性配合 background-image？
有人想绕开伪元素，给每个 li 加 value 属性再用 background-image 模拟图标，这会导致三个实际问题：
立即学习“前端免费学习笔记（深入）”；
-
value只影响计数起点（比如<li value="5">让该项显示为“5.”），但图标还是得靠 CSS 加，没省事 - 手动给每个
li写value破坏语义连续性，动态插入新项时极易断号 -
background-image图标无法随font-size缩放，响应式场景下常出现模糊或错位
真正难处理的不是“怎么加图标”，而是“加完之后，列表还能被屏幕阅读器正确识别、能被打印样式保留、能在不同缩放比例下对齐”。这些细节在 ::marker 里是默认保障的，在 ::before 里得自己一条条对齐。
