Bootstrap 5 的 text-decoration-line-through 仅设置 text-decoration-line: line-through，不控制颜色或线型，删除线颜色始终为文字当前色（currentColor），无法直接设为红色或主题色；需自定义时须额外写 CSS 覆盖。
Bootstrap 5 中 text-decoration-line-through 的实际行为
它只设置 text-decoration-line: line-through，不碰 text-decoration-color 或 text-decoration-style。这意味着删除线颜色永远是文字当前颜色（currentcolor），没法靠一个 class 直接改成红色或主题色。
常见错误现象：给按钮加了 text-decoration-line-through，结果删除线和文字一样灰，用户根本看不出状态变化。
- 使用场景多见于待办任务完成态、价格划除、禁用文案提示
- 如果需要自定义颜色或线型（比如虚线删除线），必须额外写 CSS，覆盖 Bootstrap 的默认规则
- 在深色背景上，纯
text-decoration-line-through可能对比度不足，建议配合opacity或color调整文字本身
为什么直接对 <li> 设置 text-decoration-line-through 会出问题
因为 text-decoration 具有继承性，且无法精准作用于文本节点。当你对父容器（如 <li>）设置该样式，所有子元素——包括复选框、图标、按钮——都会“看起来”被划掉，但其实只是视觉错觉；更糟的是，纯文本节点（Text）根本不能独立响应样式变更。
正确做法是把可装饰的文本内容包裹进语义化、可样式化的标签中：
- 在 JS 创建任务时，别用
document.createTextNode()，改用document.createElement('span') - 给这个
span加上明确 class，比如task-text - 在状态切换函数里，只操作这个
span的style.textDecoration，而不是整个li
text-decoration-line-through 和原生 CSS 的 line-through 有啥区别
没有本质区别——Bootstrap 的这个 class 就是把 text-decoration: line-through 封装了一层。但它省略了其他子属性，所以你不能指望它支持波浪线、双线或颜色控制。
性能与兼容性影响很小，但要注意：
- IE 11 支持
text-decoration-line，但不支持text-decoration-color或text-decoration-style，所以自定义线型在旧浏览器会回退为实线 - 若同时需要下划线 + 删除线（比如强调已失效的优惠条款），得手动写
text-decoration: underline line-through，Bootstrap 没提供对应工具类 - 用
text-decoration: none清除时，要确保清除的是同一层级的元素；父级设了line-through，子级设none是无效的
容易被忽略的细节：删除线位置不准、粗细异常
现代浏览器对 text-decoration 的渲染基于字体度量（font metrics），不同字体、字号、行高下，删除线的垂直位置和厚度可能浮动。尤其在使用非系统字体（如 Inter、SF Pro）时，line-through 可能偏高或偏细。
解决办法不是换字体，而是微调：
- 加
text-decoration-thickness: 1px显式控制粗细（注意：IE 不支持） - 用
text-underline-offset调整上下位置（同样 IE 不支持，但 Chrome/Firefox/Edge 均可用） - 如果项目需强一致性，干脆放弃
text-decoration，改用伪元素::after手绘一条绝对定位的横线
