能，但必须用现代浏览器支持的子属性配合text-decoration简写使用：text-decoration-color控制颜色，text-decoration-style设置dotted/dashed/wavy等样式，text-decoration-thickness设定粗细（如2px），并需搭配text-underline-offset调整下划线位置以避开字母降部，避免继承干扰和渲染异常。
能，但必须用现代浏览器支持的子属性，不能只靠 text-decoration: underline 硬写。 否则你只能得到一条和文字颜色一致、粗细固定、样式单一的实线下划线——而且它还会穿过字母降部（比如 g、y 下方），视觉上很别扭。
text-decoration-color / text-decoration-style / text-decoration-thickness 怎么配着用
这三个子属性必须和 text-decoration 主属性一起生效，单独写没效果。浏览器按“先声明后覆盖”规则解析，推荐统一写在 text-decoration 简写里，避免遗漏。
-
text-decoration-color控制线的颜色，可设任意合法颜色值（#f00、rgb(255, 0, 0)、currentColor都行） -
text-decoration-style支持solid、double、dotted、dashed、wavy，注意wavy在 Safari 15.4+ 才稳定支持 -
text-decoration-thickness接受数值（如2px）、关键词（auto、from-font）或百分比（0.1em），auto是默认值，但实际粗细常偏细，建议显式设2px或0.15em
示例：给链接加一条红色波浪虚线下划线
abbr:hover {
text-decoration: underline wavy red;
text-decoration-thickness: 2px;
}
注意：这里没写 text-decoration-style: wavy，因为 wavy 已作为简写值传入，text-decoration-thickness 必须额外声明，它不参与简写。
为什么有时候下划线位置不对或消失
常见原因不是代码写错，而是布局或继承干扰：
- 父元素设置了
text-decoration: none，且未在子元素重置——text-decoration会继承，但不能被子元素“取消继承”，必须显式覆盖 - 用了
display: inline-block或transform的元素，可能触发新的层叠上下文，导致下划线渲染异常 - 字体本身降部过深（如某些手写体），
text-underline-offset没调——这个属性专门控制下划线离文字 baseline 的距离，默认是auto，但经常不够用
补救办法：加一行 text-underline-offset: 3px（数值按实际字体调整），比硬调 line-height 或 padding 更精准。
text-decoration 和 border-bottom 哪个更适合做下划线
看需求场景：
- 要语义正确、可访问性好（屏幕阅读器能识别装饰意图）、且只需基础样式 → 用
text-decoration系列 - 要精确控制位置（比如紧贴文字底部不穿降部）、需要 hover 时动画过渡、或得兼容 IE11 → 用
border-bottom模拟，但记得先text-decoration: none清掉默认线 - 要同时有下划线 + 删除线 + 上划线 → 只能用
text-decoration，border-bottom无法叠加多条线
关键区别在于：border-bottom 是块级盒子的边框，text-decoration 是文本自身的装饰。前者可控性强但语义弱，后者语义清晰但控制粒度较粗——text-underline-offset 和 text-decoration-thickness 这两个属性就是为缩小这个差距而生的。
真正容易被忽略的是 text-underline-offset 的存在，很多人卡在下划线压字或离得太远，却没想到浏览器早就提供了这个开关。它不像 color 或 style 那样常被提及，但在真实项目里，调它三遍比改五次 font-size 更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
