对ol列表项加下划线应将文字包裹在span内并仅对其设置text-decoration: underline；或用border-bottom替代以提升兼容性与稳定性，避免序号错位、下划线断裂等问题。
ol列表项默认不支持text-decoration
直接对 <ol></ol> 或 <li> 设置 text-decoration: underline 通常无效，因为浏览器会重置 <li> 的装饰行为——尤其当列表项包含换行、缩进或计数器时，下划线可能断裂、偏移，甚至被序号“切断”。
用::marker伪元素+inline包装是稳妥方案
真正可控的方式是：把文字内容包裹在 <span></span> 里，仅对这个内联元素加下划线；同时确保序号（::marker）不受影响。这样既保留原生序号样式，又避免下划线穿插在数字和文字之间。
示例写法：
<ol> <li><span>第一项内容</span></li> <li><span>第二项内容</span></li> </ol>
ol li span { text-decoration: underline; }
立即学习“前端免费学习笔记（深入）”；
注意点：
- 不要给
<li>设display: inline，否则序号可能错位或消失 - 如果用了
list-style-position: inside，下划线仍可能盖住序号，建议保持默认outside - 若需下划线延伸到行尾（如对齐需求），改用
border-bottom+padding-bottom更可靠
用border-bottom替代text-decoration更可控
当需要稳定对齐、避免字体基线干扰，或兼容老版本 Safari（曾有 text-decoration 渲染 bug），用 border-bottom 是更鲁棒的选择。
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
关键设置：
-
display: inline-block或保持inline（取决于是否要撑高行距） -
border-bottom: 1px solid currentColor—— 自动继承文字颜色 -
padding-bottom: 2px避免贴底难看清 - 务必设
vertical-align: baseline防止行高错乱
动态生成的ol要注意CSS作用域
如果 <ol></ol> 来自 Markdown 渲染、CMS 输出或 JS 模板（比如 Vue/React 的 v-for），很可能没有手动加 <span></span> 的机会。这时得靠 CSS 属性选择器兜底：
ol li:not(:has(> span)) { /* fallback */ } 不行——:has() 兼容性有限；更实际的做法是预设所有 li 内第一级行内内容自动包裹：
ol li *:first-child:not(ol):not(ul) { text-decoration: underline; } —— 但风险高，易误伤嵌套结构。
最稳路径仍是后端/模板层统一注入 <span class="li-content"></span>，前端只管样式。
复杂点往往不在“怎么加下划线”，而在于“谁该被划、谁不该被划、换行后还划不划”。没封装好，一次样式更新就能让整页列表的下划线断成三截。
