链接悬停下划线 5 种动画（生长/居中/滑入/双线 CSS 源码）

效果演示（真实可交互）

下方 5 个链接分别演示不同的下划线动画：从左向右生长、从中间展开、下划线滑入、上下双线扩张、波浪渐变线。

完整代码

HTML 结构：链接统一使用 .link 基类，追加类名切换动画：

<a href="#" class="link l-grow">① 从左向右生长</a>
<a href="#" class="link l-center">② 从中间展开</a>
<a href="#" class="link l-slide">③ 下划线滑入</a>
<a href="#" class="link l-double">④ 双线扩张</a>
<a href="#" class="link l-wavy">⑤ 波浪渐变线</a>

核心 CSS：下划线统一由 ::after 伪元素实现，通过改变 width、left 与 transform 得到不同生长方式：

.link { position: relative; text-decoration: none; color: #aab3c2; }
.link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  background: #6c8cff;
  transition: all .35s cubic-bezier(.22, .61, .36, 1);
}

/* ① 从左向右生长 */
.l-grow::after { width: 0; }
.l-grow:hover::after { width: 100%; }

/* ② 从中间向两边展开 */
.l-center::after { left: 50%; width: 0; transform: translateX(-50%); }
.l-center:hover::after { width: 100%; }

/* ③ 从左侧滑入 */
.l-slide::after { left: -100%; width: 100%; opacity: 0; }
.l-slide:hover::after { left: 0; opacity: 1; }

/* ④ 上下双线 */
.l-double::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 0; height: 2px;
  background: #b388ff;
  transition: width .35s cubic-bezier(.22, .61, .36, 1);
}
.l-double:hover::before, .l-double:hover::after { width: 100%; }

参数说明

兼容性与性能

• 纯 CSS + 伪元素，零 JS 零依赖，兼容所有现代浏览器
• 动画只改 width 与 transform，注意 width 动画会触发布局，性能敏感场景可改用 scaleX 配合 transform-origin 实现
• 波浪渐变线使用 background-clip: text 时需加 -webkit- 前缀以兼容 Safari
• 正文中大量链接时建议只对 hover 元素做动画，避免无谓的重绘

常见问题

Q: 下划线会跟文字重叠吗？ 不会，::after 定位在 bottom: 0，只要给 .link 留出 padding-bottom 就不会压到文字。

Q: 想要更细更淡的线怎么改？ 调 height: 1px 并把颜色换成半透明，如 rgba(108, 140, 255, .5)。

Q: 能用于多行文本链接吗？ 伪元素定位基于整个链接盒，多行时建议用 background-image 渐变方案替代，或者只做单行场景。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。