通过设置 list-style-position: inside 将列表标记移入内容区域，再对 <li> 应用 text-decoration: line-through，即可实现悬停时整个列表项（含数字/字母标记）统一加删除线的效果。

通过设置 `list-style-position: inside` 将列表标记移入内容区域，再对 `

` 应用 `text-decoration: line-through`，即可实现悬停时整个列表项（含数字/字母标记）统一加删除线的效果。

在 HTML 中，<li> 元素的默认标记（如有序列表中的 1.、2.）由伪元素 ::marker 生成，默认位于列表项内容框之外（即 list-style-position: outside）。正因如此，直接对 <li> 设置 text-decoration: line-through 仅作用于文本内容，无法覆盖外部的标记。

解决方法是将标记“拉进”内容流中：使用 list-style-position: inside，使 ::marker 成为内联内容的一部分，与文本处于同一行内格式化上下文。此时，text-decoration 可自然延伸至标记区域。

✅ 正确实现代码如下：

ol li {
  list-style-position: inside;
}

ol li:hover {
  text-decoration: line-through;
}

<ol>
  <li>Foo</li>
  <li>Bar</li>
  <li>Foobar</li>
</ol>

⚠️ 注意事项：

• list-style-position: inside 会影响布局：标记会参与行高和文本对齐，可能导致首行缩进或垂直对齐变化，建议结合 line-height 和 vertical-align 微调；
• ::marker 伪元素目前不支持 text-decoration（多数浏览器尚未实现），因此 li::marker:hover { text-decoration: line-through } 无效，切勿依赖；
• 该方案兼容现代浏览器（Chrome 89+、Firefox 89+、Safari 15.4+），IE 完全不支持 inside 的 marker 集成效果，需降级处理；
• 若需更精细控制（如仅删除线穿过数字、不穿文本），应改用 background-image 或绝对定位伪元素模拟，但复杂度显著上升。

总结：list-style-position: inside 是语义正确、简洁高效的标准解法——它让标记真正成为可装饰的内联内容，而非游离的装饰性附属物。