text-decoration: underline 和 line-through 是唯一直接有效的写法；需配 text-underline-offset 和 text-decoration-thickness 精确控制位置与粗细，并显式设置 text-decoration-color 保证主题适配。
text-decoration: underline 和 line-through 是唯一直接有效的写法
直接用 text-decoration: underline 加下划线、text-decoration: line-through 加删除线，是当前所有主流浏览器（Chrome 89+、Firefox 70+、Safari 15.4+、Edge 90+）都支持的稳定方案。别去试 text-decoration-line: underline 这种 Level 3 写法——老版本 Safari 和部分国产内核会完全忽略，且没额外收益。
常见错误是把两者混写成 text-decoration: underline line-through，这在语法上合法，但实际只生效最后一个值（即删除线），下划线被覆盖。真要同时显示，得用伪元素或 border-bottom + text-decoration: line-through 组合。
- 单一下划线：
text-decoration: underline - 单一删除线：
text-decoration: line-through - 都不想要：
text-decoration: none（注意：它会清除父级继承的所有装饰，不是“仅关掉当前”）
下划线位置和粗细不听使唤？必须配 text-underline-offset 和 text-decoration-thickness
默认下划线贴着字体基线，中英文混排时容易“悬空”或压到 g/y 的 descender；粗细也随字体变化，比如思源黑体比 Inter 粗一倍。光写 text-decoration: underline 基本等于放弃控制权。
这两个属性必须成对出现，且不能只设一个：
立即学习“前端免费学习笔记（深入）”；
-
text-underline-offset: 2px：往下拉 2px，避开 descender；别用负值，Safari 16.4 之前会渲染错位 -
text-decoration-thickness: 1px：强制固定粗细；auto仍会随字体浮动，不可靠 - 必须显式加
text-decoration-color，否则继承文字色，换暗色主题时可能消失
兼容性注意：IE 完全不支持，旧版 Safari（text-decoration 主属性，这两个子属性会被静默忽略——此时回退到默认下划线，无报错但效果失控。
line-through 撑高行距？用 text-decoration-skip-ink: auto 抑制
text-decoration: line-through 默认参与盒模型计算，删除线位置固定在 x-height 中间，导致行高被撑开，尤其在小字号（如 font-size: 0.75rem）时特别明显。这不是 bug，是 CSS Text Decoration Level 3 规范明确要求的行为。
解决办法只有这一条有效路径：
- 加上
text-decoration-skip-ink: auto：让删除线自动绕过字母笔画，视觉干净，且基本不撑行高 - 绝对不要用
text-decoration-skip-ink: none：线会强行穿过 g/p/q 等字形，可读性归零 - 若需兼容 IE 或 Safari ::after 伪元素 +
position: absolute模拟，但得手动算top值，且响应式场景极易错位
语义陷阱：<u> 和 <del> 标签不是样式开关
<u> 在 HTML5 中已脱离“纯装饰”语义，专用于标注拼写错误、专有名词、中文专名号等有明确含义的文本；<del> 则表示内容被移除，需配合 datetime 属性说明时间。它们只是“暗示浏览器该加什么线”，不是“我要加线”的指令。
滥用后果很实际：
- 屏幕阅读器可能跳过
<u>内容，或对<del>播报“已删除”，干扰信息理解 - 禁用 CSS 后，
<u>仍会显示下划线，但语义完全错位 - 纯视觉需求（比如强调某段文案）？只用 CSS，别碰这两个标签
真正麻烦的是多语言混合场景：日文需要着重号（dot above）、阿拉伯文要避免下划线切断连字——这些 text-decoration 原生不支持，得切到 text-emphasis 或 SVG 覆盖，一行 CSS 解决不了。
