text-decoration-color 在现代浏览器中支持 transition，但需显式设置初始颜色并配合 transition 使用，推荐优先采用 border-bottom 或 background 方案以获得更好的兼容性和动画控制，如实现下划线颜色渐变与长度生长效果。
文字下划线平滑出现或颜色渐变，是提升网页交互细节的常见需求。虽然 text-decoration-color 看似可以直接用 CSS transition 实现颜色过渡，但实际情况稍有复杂。
text-decoration-color 支持 transition 吗？
现代浏览器中，text-decoration-color 是可以被 transition 的，但需要满足一定条件：
- 必须显式设置初始的
text-decoration-color，不能依赖默认值 - 需配合
transition属性使用 - 部分旧浏览器（如某些版本 Safari）可能不完全支持
让链接文字在 hover 时下划线颜色从灰色平滑变为蓝色：
.link {
text-decoration: underline;
text-decoration-color: #6c757d;
transition: text-decoration-color 0.3s ease;
}
.link:hover {
text-decoration-color: #0d6efd;
}
更可靠的替代方案：使用 border-bottom 或 background
由于 text-decoration-color 的兼容性和控制粒度有限，更推荐使用 border-bottom 或 background-image 来实现更灵活的下划线过渡效果。
立即学习“前端免费学习笔记（深入）”；
方法一：使用 border-bottom
将下划线视为底部边框，通过控制其宽度、颜色和 visibility 实现动画：
.link-border {
display: inline-block;
text-decoration: none;
color: #000;
border-bottom: 2px solid transparent;
transition: border-color 0.3s ease, border-width 0.3s ease;
}
.link-border:hover {
border-color: #0d6efd;
border-width: 2px;
}
方法二：使用 background-gradient 实现渐进下划线
利用背景渐变和 background-size 控制下划线“生长”动画：
.link-bg {
text-decoration: none;
background-image: linear-gradient(transparent, transparent), linear-gradient(#0d6efd, #0d6efd);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size 0.3s ease;
}
.link-bg:hover {
background-size: 100% 2px;
}
总结与建议
虽然 text-decoration-color 在现代浏览器中支持 transition，但为了更好的兼容性和视觉控制力，推荐优先使用 border-bottom 或 background 方案。这些方法不仅能实现颜色过渡，还能轻松添加下划线长度动画、延迟出现等高级效果。
基本上就这些，选择哪种方式取决于你的设计需求和目标浏览器支持范围。
