text-decoration-thickness 必须与 text-decoration-line 或 text-decoration 同时使用才生效，单独设置无效；需配合 text-underline-offset 避免下划线切割降部字母；Firefox 不支持，应优先用 ::after 伪元素实现兼容下划线。
text-decoration-thickness 本身不“修改下划线粗细”，它只定义粗细——但前提是下划线必须存在。单独设这个值，浏览器压根不会画线。
为什么写了text-decoration-thickness: 2px却没效果
因为 text-decoration-thickness 是个“依赖属性”：它必须和 text-decoration-line（或简写 text-decoration）一起出现才生效。
- ❌ 错误写法：
th { text-decoration-thickness: 2px; }→ 浏览器忽略整条声明，无下划线 - ✅ 正确写法：
th { text-decoration-line: underline; text-decoration-thickness: 0.08em; } - ✅ 简写写法：
th { text-decoration: underline solid currentColor 0.08em; }（注意顺序：line → style → color → thickness） - ⚠️ 注意：
text-decoration: underline单独写，等价于text-decoration-line: underline，但**不启用**text-decoration-thickness的控制权——必须显式写出厚度值
粗线压字？text-underline-offset 必须同步配
text-decoration-thickness 只管粗细，不管位置。线变粗后，视觉重心下移，很容易切到 g、y、q 的 descender 区域，看起来像被截断。
- 默认
text-underline-offset: auto在 Chrome/Firefox/Safari 中计算结果不一致，不可靠 - 推荐固定值：
text-underline-offset: 0.15em（比0.08em粗细略大一点，视觉更平衡） - 避免负值：
text-underline-offset: -1px在 Firefox 和部分 Safari 中会导致线消失或错位 - 单位优先用
em：随font-size缩放，中英文混排更稳；px在响应式场景易失准
Firefox 不支持？别信 @supports 检测
截至 2026 年 9 月，Firefox（v128+）仍标记 text-decoration-thickness 为 “Not planned”，完全不解析该声明。更麻烦的是：@supports (text-decoration-thickness: 1px) 在旧版 Chrome/Edge 中可能返回 true，但实际不渲染——检测通过，效果缺席。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误 fallback：
text-decoration-thickness: 2px; border-bottom: 2px solid #007bff;→ 原生属性被忽略，border-bottom仍会叠加，造成双线或错位 - ✅ 可靠方案：以
::after伪元素为主路径，显式关闭原生线：text-decoration: none; - ✅ 示例伪元素下划线：
th { position: relative; text-decoration: none; } th::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #333; transform: translateY(0.1em); }
真正容易被忽略的点是：你写的 text-decoration-thickness 值再精确，只要没配 text-decoration-line 或没处理 text-underline-offset，在用户眼里就是“没效果”或“丑得离谱”。而兼容性上，别寄希望于检测，直接用伪元素兜底才是生产环境的常态。
