17370845950

用伪元素+width动画实现下划线从左到右描边效果最常用可控：设a为relative，::after绝对定位到底部，hover时width从0到100%过渡，配合cubic-bezier缓动更自然。

下划线 hover 出现太突然，本质是默认用 text-decoration 或 border-bottom 简单切换导致的“硬切”。用 CSS keyframes 做从左向右描边动画，能自然过渡、提升质感。

用伪元素 + width 动画实现描边效果

这是最常用也最可控的方式：不直接操作文字下划线，而是用 ::after 伪元素模拟一条横线，通过控制它的宽度和位置来实现“从左到右”的绘制感。

• 给链接加 position: relative，为伪元素提供定位上下文
• 伪元素设为 absolute，底部对齐，初始 width: 0、left: 0
• hover 时用 animation 触发 width 从 0 到 100% 的变化

示例代码：

 a { position: relative; text-decoration: none; color: #333; }
a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s ease-out;
}
a:hover::after { width: 100%; }

用 keyframes 实现更精细的描边节奏

如果想控制起始/加速/回弹等细节，就用 @keyframes 替代简单 transition。比如让线条先快后慢，或带一点“回抽”感，会更像手绘描边。

• 定义动画：从 width: 0 → width: 100%，可加入 transform: scaleX() 配合避免重排
• 用 animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1) 调出自然缓动
• 注意设置 animation-fill-mode: forwards，保证动画结束后保持最终状态

示例动画定义：

@keyframes drawLine {
  from { width: 0; transform: scaleX(0); }
  to { width: 100%; transform: scaleX(1); }
}

a:hover::after {
  animation: drawLine 0.4s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

兼容性与性能小提醒

伪元素 + width 动画在所有现代浏览器中表现稳定，且只触发合成层（尤其是加了 transform），不会引起重排重绘，很轻量。

• 避免对 left / right 做动画——会触发 layout
• 如果需要支持老版 Safari，可加 -webkit-transform 前缀
• 不想用伪元素？也可用 background-image: linear-gradient() + background-size 动画，原理类似

基本上就这些。描边动画不复杂但容易忽略节奏和锚点控制，调好 timing-function 和 duration，比加一堆 fancy 效果更显专业。