通过设置 list-style-position: inside 将列表标记（如数字、圆点）纳入 <li> 的内容流中，再对 li:hover 应用 text-decoration: line-through，即可实现删除线完整覆盖文字与序号的效果。
通过设置 `list-style-position: inside` 将列表标记（如数字、圆点）纳入 `
在标准 HTML 列表中，<li> 元素的标记（marker，例如有序列表中的 1.、2.）默认由 list-style-position: outside 控制，此时标记位于元素盒模型外部，独立于内容区域，因此 text-decoration 无法作用于它——这也是为什么直接对 li:hover 设置 line-through 或尝试给 li::marker:hover 添加装饰均无效的根本原因。
解决方法是将标记“拉进”内容流：使用 list-style-position: inside，使标记成为 <li> 内联内容的一部分（类似普通文本），从而能被 text-decoration 统一渲染。
✅ 正确实现代码如下：
ol,
ul {
/* 可选：重置默认外边距，提升一致性 */
margin: 0;
padding-left: 1.5em;
}
li {
list-style-position: inside; /* 关键：让 marker 成为内容流一部分 */
}
li:hover {
text-decoration: line-through;
text-decoration-color: currentColor; /* 可选：确保颜色与文字一致 */
text-decoration-thickness: 1.2px; /* 可选：微调线粗细，增强可读性 */
}<ol> <li>Foo</li> <li>Bar</li> <li>Foobar</li> </ol>
⚠️ 注意事项：
- list-style-position: inside 对 ul 和 ol 均适用，但会轻微影响布局（因 marker 占据行内空间，可能改变首行缩进或换行行为），建议配合 padding 或 margin 微调；
- ::marker 伪元素目前不支持 text-decoration（CSS Text Decoration Level 4 规范中虽已提案，但主流浏览器尚未实现），因此 li::marker:hover { text-decoration: line-through } 属于无效写法；
- 若需兼容极老浏览器（如 IE），该方案仍可靠，因其基于 CSS2.1 已广泛支持的属性；
- 如需更精细控制（如仅删除线穿过文字不穿 marker），则需改用 background-image 或 ::before 模拟，但本场景下 inside + line-through 是最简洁、语义正确且跨浏览器稳定的解法。
综上，list-style-position: inside 不仅解决了 strikethrough 覆盖 marker 的问题，更体现了 CSS 盒模型与文本装饰机制的协同逻辑——理解标记的定位方式，是精准控制列表样式的关键前提。
