text-decoration下划线不显示主因是父元素设了none或规则被覆盖；现代应拆用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 看。 
