仅用 text-decoration: line-through 不够，因删除线颜色浅、粗细不可控、会继承影响子元素；需配合 text-decoration-line、color 和 thickness 三属性协同设置。
直接用 text-decoration: line-through 是最快、最通用的做法，但仅靠它往往不够——颜色太淡、粗细不可控、继承行为容易误伤子元素，真要上线得补 CSS 或换方案。
为什么不能只写 text-decoration: line-through
这个声明确实能立刻出效果，但它有三个实际坑：
- 删除线默认是细灰线，在浅灰背景或小字号下几乎看不见
- 它会向下继承：比如给
<p>加了该样式，里面嵌套的<strong>或<a>也会被划掉，除非显式重置 - 无法单独调颜色或粗细——
text-decoration-color和text-decoration-thickness必须和text-decoration-line一起用才生效，缺一不可
示例（安全写法）：
p.deleted {
text-decoration-line: line-through;
text-decoration-color: #d32f2f;
text-decoration-thickness: 2px;
}
<del> 标签要不要用？什么时候用？
要用，但不是“用了就完事”。<del> 的核心价值是语义——告诉浏览器、屏幕阅读器、爬虫“这段内容已被正式删除”，比如价格变更、条款修订、编辑痕迹。它的默认样式弱，必须配 CSS 才能视觉可见。
立即学习“前端免费学习笔记（深入）”；
- 适合场景：文档修订历史、电商原价标记（配合
<ins>）、法律文本删改 - 别用在纯交互反馈上（比如任务列表勾选后划掉），那属于状态变化，应由 JS 控制 class
- IE8 及更旧版本不支持
<del>的 CSS 伪类，如需兼容，得加 polyfill 或降级处理
正确写法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<del class="price-old">¥199</del><ins>¥99</ins>
对应 CSS：
.price-old {
text-decoration: line-through;
color: #9e9e9e;
}
动态添加/移除删除线（JS 场景）
用户操作触发的删除线（如待办列表完成标记），别用 innerHTML 拼 <del>，也别直接改 style.textDecoration——前者破坏 DOM 结构，后者难维护。
- 推荐做法：预定义 class（如
.strikethrough），用element.classList.add()/.remove() - 选中目标要精确：用
querySelector('.task-text')比parentNode.children[0]更可靠 - 避免用
innerText读写文本，改用textContent防 XSS 和布局抖动
典型代码片段：
function finishTask() {
const textSpan = this.parentNode.querySelector('span.task-text');
if (textSpan) {
textSpan.classList.toggle('strikethrough');
}
}
需要自定义删除线位置、角度或动画怎么办？
标准 text-decoration 不支持旋转、虚线、渐变色或 hover 动画。这时候得用 ::after 伪元素手动画线。
- 原理：文字容器设
position: relative，伪元素绝对定位覆盖其上 - 关键限制：伪元素宽度默认不随文字自适应，
width: 100%只对块级元素有效；行内元素需额外处理（如display: inline-block） - 动画只能作用于伪元素自身属性（
transform、opacity），不能对text-decoration做transition
最小可用示例：
.custom-strike {
position: relative;
}
.custom-strike::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #ff6b6b;
transform: translateY(-50%);
}
真正容易被忽略的是语义起点：划掉一行字，到底是“编辑动作”“价格失效”还是“用户状态反馈”？选错标签或 class 名，后期重构时比改样式还费劲。
