text-decoration-thickness需与text-decoration-line成对使用，Chrome99+/Edge99+/Safari15.4+支持，Firefox不支持；须配合text-underline-offset调整位置，推荐用0.08em等相对单位，并用伪元素降级兼容。
text-decoration-thickness 不生效？先看浏览器支持和基础写法
这个属性在 Chrome 99+、Edge 99+、Safari 15.4+ 才真正稳定可用，Firefox 目前（v128）仍不支持，用之前得加 text-decoration-line 一起声明，否则多数浏览器会直接忽略粗细设置。
常见错误是只写 text-decoration-thickness: 2px，但没配 text-decoration-line: underline —— 这时修饰线根本不会出现，更别说调粗细了。
- 必须成对使用：
text-decoration-line+text-decoration-thickness - 不能单独靠
text-decoration简写语法隐式触发（例如text-decoration: underline不会激活thickness） - Safari 对
auto和from-font值支持较弱，建议优先用具体数值如1.5px
怎么让下划线刚好贴文字底部而不压字？用 text-underline-offset 配合调整
text-decoration-thickness 只管粗细，不管位置；粗线容易“吃掉”字母下伸部分（比如 g、y、q），看起来像被截断。这时候得靠 text-underline-offset 往下挪一点。
默认 offset 是 auto，但它的计算逻辑各浏览器不一致，尤其加粗后更容易偏高。手动设成正值（如 2px）通常更可靠。
立即学习“前端免费学习笔记（深入）”；
-
text-underline-offset: 0→ 线紧贴字体底线，可能切到 descender -
text-underline-offset: 2px→ 粗线（如2px）下移后，视觉上更平衡 - 避免负值：可能导致线跑到文字中间，语义混乱
响应式场景下粗细怎么随字号缩放？用 em 或 rem 单位更稳妥
如果用固定像素（如 text-decoration-thickness: 1.5px），当用户缩放页面或切换系统字体大小时，下划线可能显得过细或突兀。用相对单位能保持比例关系。
实测 0.08em 是个比较通用的起点——它约等于字体大小的 8%，在 16px ~ 24px 区间内视觉一致性较好。
-
text-decoration-thickness: 0.08em→ 随font-size自动缩放 - 慎用
ex：依赖字体 x-height，不同字体差异大，兼容性差 - 不要混用单位：比如
text-decoration-thickness: 1px和text-underline-offset: 0.1em容易错位
旧浏览器降级方案：别指望 fallback，用伪元素重写更可控
Firefox 不支持 text-decoration-thickness，且无法用 @supports 精准检测（因为部分浏览器识别属性名但不实现功能）。硬加 !important 或覆盖规则基本无效。
真正可靠的方案是绕开原生修饰线，用 ::after 伪元素模拟：
u, .underline {
text-decoration: none;
position: relative;
}
.underline::after {
content: '';
position: absolute;
left: 0;
bottom: 2px; /* 手动控制位置 */
width: 100%;
height: 2px; /* 就是你要的“粗细” */
background: currentColor;
}这样既能精确控制粗细、颜色、位置，还能加动画、圆角等原生修饰线做不到的效果。
复杂点在于要处理换行、inline 元素嵌套、line-height 变化这些细节——但比起在兼容性泥潭里反复试 @supports (text-decoration-thickness: 1px)，直接重写反而省时间。
