最直接可靠的方式是text-decoration: line-through，无需额外标签或JS；如需自定义颜色和粗细，必须同时设置text-decoration-line、text-decoration-color和text-decoration-thickness三者。
text-decoration: line-through 是排版删除线文字最直接、最可靠的方式，不需要额外标签或 JS，所有现代浏览器都支持。
用 text-decoration 快速加删除线
给任意元素（<p>、<span>、<div>）加 text-decoration: line-through 就能生效：
.old-price {
text-decoration: line-through;
color: #999;
}
注意点：
- 它会继承——子元素也会带删除线，除非显式设
text-decoration: none - 默认删除线位置偏低、粗细固定、颜色只能是文字色，无法单独调
- 别用已废弃的
<strike>标签，HTML5 不再支持
想改删除线颜色或粗细？必须三者同设
仅靠 text-decoration-color 或 text-decoration-thickness 单独写是无效的。必须和 text-decoration-line 一起出现：
立即学习“前端免费学习笔记（深入）”；
.highlighted-delete {
text-decoration-line: line-through;
text-decoration-color: #ff6b6b;
text-decoration-thickness: 2px;
}
兼容性要注意：
-
text-decoration-color：Chrome 57+、Firefox 36+、Safari 12.1+ 支持 -
text-decoration-thickness：Chrome 90+、Firefox 97+、Safari 15.4+ 才稳定 - 旧浏览器会忽略后两个属性，回退到默认细黑线——这是安全降级，不是 bug
需要斜穿、动画、随文字变色？用 ::after 伪元素
当标准属性不够用时，放弃 text-decoration，改用定位模拟：
.fancy-delete {
position: relative;
display: inline-block;
}
.fancy-delete::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
transform: translateY(-50%) rotate(-5deg);
}
关键细节：
-
display: inline-block是为了确保width: 100%在行内元素上生效 -
currentColor让删除线自动跟随文字颜色变化 - 伪元素不占文档流，但也不会自动适配换行文字宽度；多行需 JS 测量或改用
background-image方案
真正难的不是加线，而是让删除线在不同字号、行高、中英文混排、RTL 文本下保持位置合理——这些场景下，text-decoration-thickness 的 from-font 值或 auto 往往比写死像素更稳，但得先确认目标浏览器是否吃得住。
