用伪元素+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 效果更显专业。
