CSS下划线与删除线实用技巧

本文深入解析CSS中文本修饰的核心痛点——下划线不显示、删除线位置飘忽、样式控制僵硬等实际问题，系统梳理了text-decoration的继承机制与常见失效原因，强调现代开发应摒弃单值写法，转而使用可独立控制的text-decoration-line/color/style三属性提升灵活性和可动画性；针对line-through无法精调位置的缺陷，给出兼容性优异的伪元素替代方案；同时澄清text-underline-offset仅作用于underline且需与之共存的关键限制，帮助开发者告别“写了却看不见”的调试困境，真正实现精准、稳定、现代化的文本装饰效果。

text-decoration 为什么加了下划线却没显示？

常见现象是写了 text-decoration: underline，但文字还是光秃秃的——大概率是父元素或自身设置了 text-decoration: none，或者被继承链里更高优先级的规则覆盖了。

CSS 的 text-decoration 不像 color 那样自然继承，但它会“渲染继承”：子元素默认沿用父元素的修饰线样式（包括位置和颜色），除非显式重写。所以如果父容器设了 text-decoration: none，子元素即使写了 underline 也无效。

• 检查 computed styles，确认最终生效的是哪条规则
• 避免在通用容器（如 .content）上设 text-decoration: none，改用更具体的 selector 控制链接
• 需要局部启用下划线时，直接在目标元素上写 text-decoration: underline，并加 !important（仅当覆盖不了时）

text-decoration-line、-color、-style 怎么配合用？

老写法 text-decoration: underline red dotted 看似方便，但一来顺序敏感（line 必须在前），二来无法单独控制某一项；现代写法拆成三个属性，更可控，也支持动画（text-decoration-color 可过渡）。

注意浏览器兼容性：Firefox 70+、Chrome 80+、Safari 12.1+ 支持独立属性；旧版 Safari 仍需回退到单值写法。

• text-decoration-line 可取值：none / underline / overline / line-through / 多值如 underline line-through
• text-decoration-color 默认是 currentcolor，所以改 color 会联动影响下划线颜色
• text-decoration-style 对 underline 和 line-through 生效，值有 solid / double / dotted / dashed / wavy，但不是所有浏览器都支持 wavy（Safari 目前不支持）

删除线 text-decoration: line-through 为什么看起来偏高？

line-through 的位置由字体度量决定，不同字体、不同字号下，删除线高度差异明显——它画在字母 x 高度（x-height）附近，不是绝对居中，所以小字号时容易贴着文字上沿，大字号时又可能浮得太高。

想精确控制位置，不能只靠 text-decoration，得用伪元素模拟：

.strikethrough {
  position: relative;
}
.strikethrough::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

• 原生 line-through 无法微调垂直偏移，text-underline-offset 对它无效（该属性只作用于 underline）
• 伪元素方案兼容性好，且可自由定位、加粗、变色，但需确保父元素有 position: relative
• 若只是想统一视觉高度，建议限定字体栈（如强制用 -apple-system, system-ui），减少字体差异带来的跳变

text-underline-offset 能调下划线距离，但为啥没反应？

这个属性只对 text-decoration-line: underline 生效，且必须和 underline 同时出现；单独写 text-underline-offset: 4px 不会触发任何效果。

另外，它的单位支持 px、em、rem，但负值行为不稳定（Chrome 允许，Firefox 可能截断），建议只用正值。

• 正确写法：text-decoration: underline; text-underline-offset: 3px
• 不要和 text-decoration-thickness 混用时忽略顺序——厚度会影响 offset 的基准线，建议先设 thickness 再设 offset
• 旧版 Chrome（border-bottom + padding-bottom 手动模拟

实际用的时候，最常被卡住的不是语法，而是忘了 text-decoration 的“渲染继承”机制——它不像普通属性那样靠 cascade 决定，而是一套独立的叠加逻辑。改一处，可能整段文字的线都跟着变，得盯着 computed styles 看。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~