CSS文字下划线平滑过渡技巧

想让文字下划线平滑出现、颜色渐变甚至“生长”动画？虽然现代浏览器支持 `text-decoration-color` 的过渡效果，但受限于默认值无法触发动画、旧版 Safari 兼容性差等问题，实际体验并不稳定；更推荐采用 `border-bottom` 或 `background` 方案——前者通过控制边框颜色与宽度实现简洁过渡，后者借助渐变背景和 `background-size` 实现精准的长度生长动画，不仅兼容性更好，还能轻松拓展延迟、缓动、多段效果等高级交互细节，是提升网页精致度与用户体验的实用利器。

文字下划线平滑出现或颜色渐变，是提升网页交互细节的常见需求。虽然 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 来实现更灵活的下划线过渡效果。

将下划线视为底部边框，通过控制其宽度、颜色和 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-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 方案。这些方法不仅能实现颜色过渡，还能轻松添加下划线长度动画、延迟出现等高级效果。

基本上就这些，选择哪种方式取决于你的设计需求和目标浏览器支持范围。

好了，本文到此结束，带大家了解了《CSS文字下划线平滑过渡技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！