css下划线hover出现太突然如何优化？用keyframes制作从左向右描边动画

在网页开发中，链接或导航项的下划线如果仅在hover时直接显示，会显得十分突兀。借助css的@keyframes，我们可以让下划线以从左向右描边的方式平滑出现，从而优化交互体验。

实现原理

核心思路是为元素添加一个伪元素（如::after）作为下划线，将其初始宽度设为0，并利用transform: scaleX(0)或width: 0隐藏。当鼠标悬停时，通过animation调用keyframes，让伪元素在固定时间内从左侧向右展开到完整宽度。

为什么用伪元素

伪元素不会破坏原有文档结构，也方便单独控制下划线样式，是纯css实现描边动画的常用方案。

完整代码示例

下面是一段可直接使用的css与html示例，展示如何制作从左向右描边的hover下划线。

/* 基础链接样式 */
.nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
}

/* 伪元素作为下划线 */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff;
  transform: scaleX(0);
  transform-origin: left center;
}

/* 悬停时触发描边动画 */
.nav-link:hover::after {
  animation: drawLine 0.3s ease forwards;
}

/* 定义从左向右展开的keyframes */
@keyframes drawLine {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

<a href="https://ipipp.com" class="nav-link">首页</a>
<a href="https://ipipp.com" class="nav-link">文章</a>
<a href="https://ipipp.com" class="nav-link">关于</a>

使用width替代scaleX的写法

如果不希望用transform，也可以让伪元素宽度从0变到100%，效果类似。注意此时不需要设置transform-origin。

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #007bff;
}

.nav-link:hover::after {
  animation: drawWidth 0.3s ease forwards;
}

@keyframes drawWidth {
  from { width: 0; }
  to { width: 100%; }
}

注意事项

• animation的forwards属性能让动画结束后保持最后一帧状态，避免下划线缩回。
• 若需兼容老旧浏览器，应确认其对transform与animation的支持情况。
• 悬停移出时若想有收回动画，可再写一个反向keyframes并绑定到非hover状态。

纯css描边动画不仅代码量少，也不会带来额外的脚本开销，非常适合轻量级交互优化。

csskeyframeshover_animation修改时间：2026-07-27 16:15:32