用::after实现下划线动画是因为text-decoration不支持width和位移过渡；需绝对定位伪元素，配合width与transform实现滑入效果，并注意移动端兼容性及渲染性能优化。
hover下划线动画为什么用::after而不是text-decoration
因为text-decoration: underline不支持transition动画，改颜色、粗细都行，但宽度变化和位移完全无效。真正可动画的下划线必须是独立元素——::after伪元素最轻量，不用改HTML结构。
常见错误是直接给a加border-bottom再试图过渡border-width，结果发现宽度无法平滑变化（浏览器不支持border-width的过渡）。
- 必须把下划线做成绝对定位的
::after，宽高独立控制 - 父元素需设
position: relative，否则::after会相对body定位 -
content: ""不能省，否则伪元素不渲染
如何让下划线从左到右滑入（不是整体淡入）
核心是控制width和transform组合：初始width: 0 + transform: translateX(-100%)，hover时width: 100% + transform: translateX(0)。只靠width过渡会“撑开”文字，加transform能避免重排。
示例关键CSS：
立即学习“前端免费学习笔记（深入）”；
a {
position: relative;
color: #333;
}
a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease, transform 0.3s ease;
}
a:hover::after {
width: 100%;
transform: translateX(0);
}
- 如果想从中心向两边展开，把
left: 50%+transform: translateX(-50%)，hover时width: 100%即可 - 注意
transition要写全两个属性，否则只过渡其中一个 - 不要用
max-width替代width，它不触发硬件加速，动画更卡
移动端点击穿透或悬停失效怎么办
iOS Safari和部分安卓WebView默认不触发:hover（尤其在非标签上），伪元素动画可能完全不执行。这不是代码错，是平台限制。
- 确保目标元素是
<a></a>或带tabindex="0"的可聚焦元素 - 对非链接元素，加
cursor: pointer有时能激活iOS hover行为 - 更可靠的做法：用
@media (hover: hover)做特性检测，降级为点击态（:active）动画 - 真需要兼容老安卓？放弃
hover，改用JS监听touchstart/touchend切class
动画卡顿或闪烁的三个隐蔽原因
看似简单的width过渡，实际容易掉进渲染陷阱。最常被忽略的是层叠上下文和合成层问题。
- 父元素有
overflow: hidden且下划线超出范围时，可能被裁剪或触发重绘——加will-change: width提前升层 - 使用
transform: scaleX(0)替代width: 0更流畅（GPU加速），但需配合transform-origin: left - 字体抗锯齿在缩放时可能抖动，加
-webkit-font-smoothing: antialiased缓解
复杂点在于：动画是否触发重排、是否进入合成层、是否被父容器裁剪——这三者没一个能在DevTools里一眼看出，得逐项关掉样式来排查。
