可用::marker伪元素实现ol序号下划线，需设置counter-reset/increment及text-decoration: underline，并添加text-decoration-skip-ink: none避免断开。
ol列表的序号下划线不能靠list-style实现
HTML原生<ol></ol>的序号是伪元素生成的，不占文档流，也不能直接用text-decoration: underline作用在序号上。你写ol { text-decoration: underline }只会给整个<li>内容加下划线，不是只划在数字下面。
用counter-reset + counter-increment + ::marker（现代方案）
CSS 3新增了::marker伪元素，能精准选中序号本身，配合text-decoration就能实现纯CSS下划线：
ol {
counter-reset: item;
}
ol li {
counter-increment: item;
}
ol li::marker {
text-decoration: underline;
}
✅ 支持 Chrome 89+、Firefox 86+、Safari 15.4+
❌ 不支持 IE 和旧版 Edge（Edge ≤ 18）
注意：::marker里不能用display、float、position等布局属性，但text-decoration、color、font-*都可用。
兼容老浏览器：用伪元素模拟序号
如果必须支持 IE 或旧版浏览器，得放弃原生<ol></ol>，改用<ul></ul> + ::before手动计数：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
ul.numbered {
counter-reset: custom-counter;
list-style: none;
padding-left: 0;
}
ul.numbered li {
position: relative;
padding-left: 2em;
}
ul.numbered li::before {
counter-increment: custom-counter;
content: counter(custom-counter) ". ";
position: absolute;
left: 0;
text-decoration: underline;
}
这样做的实际影响包括：
- 语义丢失——屏幕阅读器可能无法识别这是有序列表
- 缩进需手动调，
padding-left和left要对齐 - 多级嵌套时需额外维护多个
counter和::before样式
别踩这个坑：text-decoration-skip-ink默认会跳过数字顶部
Chrome/Firefox 默认开启text-decoration-skip-ink: auto，它会让下划线自动避开文字笔画，导致数字下划线“断开”或“偏高”。如果你发现下划线没贴着数字底部，加这一句：
ol li::marker {
text-decoration: underline;
text-decoration-skip-ink: none;
}
另外，text-underline-offset可微调下划线离基线的距离，比如text-underline-offset: 2px让线更靠近数字。
真正麻烦的是混合场景：既要语义化，又要兼容，还要支持嵌套编号格式（如 1.1、a)、i)）。这时候建议优先用::marker，再用@supports降级到伪元素方案，而不是硬扛一个通用CSS规则。
