text-decoration 无法实现平滑下划线动画，因其过渡支持差且无法控制样式与位置；推荐用 ::after 伪元素配合 transform 和 transition 模拟，或用 border-bottom + padding-bottom 快速实现基础效果。
直接用 text-decoration 配合 transition 做不了平滑下划线动画——浏览器对 text-decoration 的过渡支持极差，多数情况下会直接跳变或完全不生效。
为什么 text-decoration: underline hover 动画会失效
Chrome、Firefox 对 text-decoration 的 transition 几乎不响应；Safari 虽部分支持，但无法控制下划线颜色、粗细、位置等细节。更关键的是：text-decoration 生成的下划线始终贴在字体基线，无法实现“从左到右滑入”“居中上浮”等设计需求。
用 background-image 模拟下划线（推荐）
本质是给文字加一层背景色条，通过 background-size 和 background-position 控制显示范围，再用 transition 动画它：
a {
position: relative;
color: #333;
text-decoration: none;
}
a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: #007bff;
transform: scaleX(0);
transition: transform 0.3s ease;
}
a:hover::after {
transform: scaleX(1);
}
-
::after伪元素必须设content: ''，否则不渲染 -
transform: scaleX(0)初始隐藏，scaleX(1)展开，比改width更性能友好 - 若要“从左滑入”，把
transform-origin设为left center；若要“居中生长”，设为center center - 注意父级
a必须有position: relative，否则::after会相对 body 定位
用 border-bottom + padding-bottom 的简版方案
适合快速实现、兼容性要求高（IE11+）的场景，但无法做“滑入”效果，只能淡入/缩放：
立即学习“前端免费学习笔记（深入）”；
a {
color: #333;
text-decoration: none;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
transition: border-bottom-color 0.2s;
}
a:hover {
border-bottom-color: #007bff;
}
- 必须加
padding-bottom，否则下划线会“压”在文字上，视觉紧贴 -
border-bottom无法独立设置圆角或渐变，灵活性远低于background-image方案 - 动画仅支持颜色、粗细变化，不支持位移或路径动画
真正要做出设计稿里的“细腻滑入下划线”，90% 的情况得靠 ::after + transform；别被 text-decoration 的字面意思带偏——它从来就不是为动画设计的属性。
