真正可控的下划线必须禁用text-decoration: none，再用border-bottom或::after伪元素重绘：前者兼容性好、定位稳定；后者支持动画、渐变及精确定长等高级效果。
text-decoration 本身支持基础自定义，但真正可控的下划线必须绕过它——直接禁用原生下划线，再用其他方式重绘。
text-decoration-color / text-decoration-style / text-decoration-thickness 能改什么
现代浏览器（Chrome 89+、Firefox 70+、Safari 15.4+）支持这些子属性：
-
text-decoration-color可单独设下划线颜色，不用和文字颜色绑定 -
text-decoration-style支持dashed、dotted、wavy，但不支持double或自定义虚实比例 -
text-decoration-thickness控制粗细，可设auto、from-font或具体像素值（如2px），但实际渲染受字体影响大 -
text-decoration-offset调整下划线离文字的距离，比老式border-bottom + padding更语义化，但 Safari 对负值支持不稳定
注意：text-decoration 是复合属性，写 text-decoration: underline red wavy 2px 时顺序无关，但若混用 text-decoration-line 等独立属性，后者会覆盖复合写法中的对应项。
为什么 border-bottom 比 text-decoration 更可靠
原生 text-decoration 的下划线位置由字体度量决定，无法精确定位；而 border-bottom 是盒模型的一部分，完全可控：
立即学习“前端免费学习笔记（深入）”；
- 加
display: inline-block防止下划线撑满整行 - 用
padding-bottom控制文字与线的间距，比text-decoration-offset更稳定 -
border-bottom-style支持所有标准边框样式，包括groove、ridge（虽然少用） - 不会穿透字母降部（如
g、y下方），避免视觉割裂
示例：a { display: inline-block; padding-bottom: 3px; border-bottom: 1.5px dashed #6c757d; }
什么时候必须用 ::after 伪元素
当需要以下任一效果时，::after 是唯一选择：
- 下划线只覆盖文字宽度的 70%，且左右留白
- 悬停时从左向右展开、或颜色渐变过渡
- 下划线带圆角、阴影、或轻微上扬弧度
- 同一行内多个词各自有不同长度/颜色的下划线（
text-decoration在一行内是统一的）
关键点：必须设父容器 position: relative，并加 text-decoration: none 彻底禁用原生下划线，否则会叠加显示。
容易被忽略的兼容性细节
看似简单的下划线，实际在跨浏览器场景中容易翻车：
- Safari 对
text-decoration-thickness和text-decoration-offset的负值支持滞后，尤其在 flex 容器内表现异常 -
border-bottom在vertical-align: middle的 inline 元素上可能错位，建议统一用inline-block - 用
background-image: linear-gradient()模拟下划线时，若背景尺寸设为100% 1px，在高 DPI 屏幕上可能发虚，建议至少2px - 所有自定义下划线方案都需配合
text-decoration: none，否则旧版浏览器可能同时渲染两根线
最稳妥的起点：禁用 text-decoration，用 border-bottom + inline-block，再按需升级到伪元素。
