CSS中text-decoration-thickness怎么修改下划线粗细-css教程-PHP中文网

text-decoration-thickness 必须与 text-decoration-line 或 text-decoration 同时使用才生效，单独设置无效；需配合 text-underline-offset 避免下划线切割降部字母；firefox 不支持，应优先用 ::after 伪元素实现兼容下划线。

css中text-decoration-thickness怎么修改下划线粗细

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 区域，看起来像被截断。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

默认 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，在用户眼里就是“没效果”或“丑得离谱”。而兼容性上，别寄希望于检测，直接用伪元素兜底才是生产环境的常态。