如何在CSS中制作文字下划线平滑显示_text-decoration-color @keyframes应用

在CSS中实现文字下划线的平滑显示，尤其是结合颜色变化和动画效果，可以通过 text-decoration 属性与 @keyframes 配合过渡（transition）或动画来完成。虽然 text-decoration-color 本身不支持直接动画，但通过一些技巧可以实现视觉上的平滑过渡效果。

使用 text-decoration 绘制下划线并设置颜色

现代浏览器支持使用 text-decoration 来控制下划线样式，包括颜色、线条类型和厚度：

示例代码：

.underline-text {
  text-decoration: underline;
  text-decoration-color: blue;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  color: black;
}

这种方式简洁，但 text-decoration-color 不支持 CSS 动画直接改变颜色过程，因此无法实现“渐变色”或“平滑变色”动画。

立即学习“前端免费学习笔记（深入）”；

用伪元素模拟下划线实现平滑动画

为了实现真正平滑的下划线动画（如颜色渐变、宽度伸展），推荐使用 ::after 或 ::before 伪元素配合 transform 和 transition。

示例：悬停时下划线从左向右展开并变色

.animated-underline {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
}

.animated-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: blue;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.animated-underline:hover::after {
  width: 100%;
  background-color: red;
}

这个方法利用了 transition 实现宽度和颜色的平滑过渡，视觉上非常流畅。

BiLin AI

免费的多语言AI搜索引擎

下载

使用 @keyframes 实现更复杂的下划线动画

如果需要循环动画或更复杂的动态效果（如下划线流动、闪烁、波浪等），可使用 @keyframes 定义关键帧动画。

示例：模拟“流动”的下划线

@keyframes underline-flow {
  0% {
    width: 0;
    background-color: blue;
  }
  50% {
    width: 100%;
    background-color: purple;
  }
  100% {
    width: 0;
    background-color: blue;
  }
}

.flow-underline {
  position: relative;
  display: inline-block;
}

.flow-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: blue;
  animation: underline-flow 2s infinite;
}

该动画让下划线从无到有再到消失，并伴随颜色变化，形成循环流动感。

结合渐变背景实现彩色下划线动画

还可以使用渐变背景 + background-position 动画实现“彩色流动线”效果：

.gradient-underline {
  position: relative;
  display: inline-block;
}

.gradient-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, red, orange, yellow, green, blue);
  background-size: 300% 100%;
  animation: slide-bg 2s linear infinite;
}

@keyframes slide-bg {
  to {
    background-position: -300% 0;
  }
}

这种方案适合打造炫酷的导航栏或标题动效。

基本上就这些。通过伪元素替代原生下划线，再结合 transition 或 @keyframes，就能突破 text-decoration-color 的限制，实现各种平滑、动态的文字下划线效果。