html中无独立“文本装饰”属性，所有效果均由text-decoration及其子属性控制；其默认下划线粗、位置偏移且不随字体缩放，需用text-decoration-thickness、text-underline-offset和text-decoration-color精细调控。
HTML 里没有 “文本装饰” 的独立属性，所有下划线、删除线、上划线效果都靠 text-decoration 及其子属性控制，直接写 text-decoration: underline 最快，但容易误用默认行为。
text-decoration 为什么总带讨厌的粗线和位置偏移？
浏览器默认的 text-decoration（比如 underline）会自动匹配字体基线，粗细、颜色、位置全由 UA 样式定，不随字体大小缩放，也不对齐文字底部。尤其在中英文混排或用了 font-size: 0.875rem 这类相对单位时，下划线常“飘”在文字中间或太粗。
- 用
text-decoration-thickness: 1px强制变细（chrome 95+ / firefox 89+ 支持） - 用
text-underline-offset: 2px往下拉（别用负值，部分浏览器渲染异常） - 必须同时设
text-decoration-color，否则继承文字色，换主题时可能看不见
要加删除线又不想影响行高怎么办？
text-decoration: line-through 默认会让行高撑开——因为浏览器把删除线当“内容”参与盒模型计算。这不是 bug，是规范行为。
- 加
text-decoration-skip-ink: auto（主流浏览器已支持），让线自动跳过笔画，视觉更干净，且基本不撑行高 - 绝对不要用
text-decoration-skip-ink: none，那会强制穿字而过，可读性崩坏 - 若需兼容 IE 或老 safari，改用伪元素：
::after+position: absolute模拟删除线，但得手动算位置
给链接去下划线后，怎么保留可访问性？
很多人一上来就写 a { text-decoration: none; }，结果屏幕阅读器用户和键盘 Tab 用户完全分不清哪是链接。WCAG 要求链接必须有明确视觉标识。
立即学习“前端免费学习笔记（深入）”；
- 保留
text-decoration: underline，但只在:hover/:focus时显示（a:not(:hover):not(:focus) { text-decoration: none; }） - 或用
border-bottom替代：它不触发text-decoration-skip-ink兼容问题，且能精确控制颜色/粗细/圆角 - 禁用
outline: none—— 键盘聚焦时必须有可见轮廓，这是硬性可访问要求
真正麻烦的是多语言场景：日文需要「着重号」（dot above），阿拉伯文要避免下划线切断连字，这些 text-decoration 原生不支持，得切到 text-emphasis 或 SVG 覆盖。别指望一行 CSS 解决所有文字装饰需求。