如何为列表项（li）及其序号标记添加贯穿式删除线-html教程-PHP中文网

如何为列表项（li）及其序号标记添加贯穿式删除线

通过设置 list-style-position: inside 将列表标记（如数字、圆点）纳入的内容流中，再对 li:hover 应用 text-decoration: line-through，即可实现删除线完整覆盖文字与序号的效果。

通过设置 `list-style-position: inside` 将列表标记（如数字、圆点）纳入 `

` 的内容流中，再对 `li:hover` 应用 `text-decoration: line-through`，即可实现删除线完整覆盖文字与序号的效果。

在标准 HTML 列表中，

元素的标记（marker，例如有序列表中的 1.、2.）默认由 list-style-position: outside 控制，此时标记位于元素盒模型外部，独立于内容区域，因此 text-decoration 无法作用于它——这也是为什么直接对 li:hover 设置 line-through 或尝试给 li::marker:hover 添加装饰均无效的根本原因。

解决方法是将标记“拉进”内容流：使用 list-style-position: inside，使标记成为

内联内容的一部分（类似普通文本），从而能被 text-decoration 统一渲染。

✅ 正确实现代码如下：

CodeSnippets

CodeSnippets是一款把代码片段库和 AI 编程聊天结合起来的开发者工具。

下载

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 盒模型与文本装饰机制的协同逻辑——理解标记的定位方式，是精准控制列表样式的关键前提。