当list-style-type无法满足自定义序号需求时，应改用::before+content配合css计数器；需设置counter-reset、counter-increment，并在content中引用counter()，支持前缀、图标、嵌套及无障碍阅读。
list-style-type 不能满足自定义序号时怎么办
直接放弃 list-style-type，改用 ::before + content 是最可控的方案。因为 list-style-type 只支持预设值（如 decimal、lower-roman），无法插入图标、混合文字、添加前缀或控制颜色/字体大小。
常见错误是试图用 counter-reset 和 counter-increment 却漏写 content: counter(...)，结果序号完全不显示；或者给 li 设了 position: relative 却忘了给 ::before 加 position: absolute，导致布局错位。
- 必须为父元素（如
ol或ul）设置counter-reset - 每个
li需要counter-increment -
::before的content必须引用该计数器，例如content: counter(my-counter) - 若要加前缀（如 “Step ”），写成
content: "Step " counter(my-counter)
如何让序号带图标或特殊符号
纯 CSS 里没法动态生成 SVG，但可以用 Unicode 字符或 Web Font 图标拼进 content。比如用 ▶️、❶、➊，或者 Font Awesome 的伪类（需确保字体已加载且 font-family 正确）。
注意：某些符号在不同系统渲染不一致（如 Windows 上 ❂ 可能显示为空心星），建议优先用稳妥的 ASCII 组合（"[" counter(step) "]"）或 SVG 背景图替代复杂图标。
- Unicode 序号符号可直接写进
content，例如content: "❶"（但只适用于固定项数） - 动态序号 + 固定图标推荐组合写法：
content: "▶ " counter(step) - 若用 Web Font，确保
::before的font-family指向对应字体，并设置font-weight和font-style匹配图标规则 - 避免在
content中写长文本或换行符，CSS 不支持\n
为什么用 counter 而不是 data-* 属性 + attr()
attr(data-index) 看似简单，但它只是静态读取 HTML 属性，无法自动递增、重置或做计算。一旦手动改了 data-index 值，就容易出错；插入/删除 li 后还得 JS 同步更新——这违背了用 CSS 控制序号的初衷。
而 counter 是浏览器原生计数机制，天然响应 DOM 变化，支持嵌套（counter(step, lower-alpha)）、格式化（decimal-leading-zero）、多级（counter(level1) "." counter(level2)），且无 JS 依赖。
-
attr()适合展示已有属性值，不适合生成序列 -
counter()在打印样式、无障碍阅读器中也更可靠（部分读屏软件会识别计数器语义） - 兼容性上，
counter自 IE8 起就支持，比attr()在伪元素中使用更稳（IE9+）
移动端或高缩放下序号错位怎么调
错位主因是 ::before 默认 inline 特性 + 行高变化，尤其在 iOS Safari 缩放或 Android Chrome 字体增强开启时。最有效解法是脱离文档流并精控尺寸。
别依赖 vertical-align 或 line-height 对齐，它们在不同字体度量下表现飘忽。直接用 position: absolute 锚定左上角，再用 transform: translateY(-50%) 垂直居中更可靠。
- 给
li加position: relative -
::before设position: absolute; top: 50%; left: 0; transform: translateY(-50%) - 显式设
width和text-align避免宽度随内容撑开 - 慎用
em单位控制间距，改用px或rem配合font-size统一基准
真正麻烦的是需要支持 RTL（从右向左）布局时，left: 0 得换成 right: 0，且 counter 格式可能需配合 direction 属性微调——这点很容易被忽略，等上线后才发现阿拉伯语环境序号跑右边去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
