必须用::after伪元素模拟下划线并设transform-origin: left bottom，否则scalex(0)从中心缩放导致“弹出”而非“滑入”；需配合position: relative、绝对定位及transition才能实现流畅左至右动画。
hover下划线动画用transform: scaleX()为什么一开始没效果
因为scaleX(0)默认从中心缩放，不是从左端开始；而且没设origin，也没配display或overflow，线条会被裁掉或居中闪动。
- 必须加
transform-origin: left center，否则缩放中心在中间，看起来像“突然弹出”而不是“从左滑入” -
text-decoration: underline本身不支持transform，得用伪元素::after模拟下划线 - 父元素如果用了
overflow: hidden（比如卡片截断），会把刚伸出来的下划线切掉，得检查容器样式 - 别对
a直接设transform，要作用在伪元素上，否则整个链接文字会跟着缩放
用::after实现可动画的下划线需要哪些必要CSS
核心是把下划线抽成独立图层，再控制它的宽度和原点。不能依赖text-decoration，它不触发重绘优化，也不响应transform过渡。
- 给
a设position: relative，为伪元素提供定位上下文 -
a::after设content: ""、position: absolute、bottom: 0、left: 0、width: 100%、height: 1px（或border-bottom） - 关键：加
transform: scaleX(0)+transform-origin: left bottom+transition: transform 0.3s ease - 在
a:hover::after里写transform: scaleX(1)，不是改width——后者触发布局重排，transform走合成层，更顺
transform: scaleX()在不同浏览器里的兼容性坑
老版本Safari（iOS 9.3、macOS 10.11）对transform-origin在伪元素上的支持不稳，有时left被忽略，下划线还是从中间展开。
- 加
-webkit-transform-origin: left bottom前缀能覆盖大部分旧Safari - Firefox对
::after的transform过渡偶尔跳帧，建议加will-change: transform（但别滥用，只加在a::after上） - IE全系不支持
transform在伪元素上动画，如果还要兼容，得回退到width过渡 +overflow: hidden，但性能差很多 - 别用
transform: scaleX(0.001)代替0来“绕过bug”，有些安卓WebView会渲染异常细线
动画从左至右但链接文字有padding时怎么对齐
padding-left或padding-right会让a内容区变窄，但::after默认按a的width拉伸，结果下划线比文字短一截，或者超出。
- 把
a::after的width改成100%不够，得配合box-sizing: border-box和显式left/right偏移 - 更可靠的做法：用
right: 0+left: 0替代width: 100%，这样它自动撑满内容盒，不受padding影响 - 如果链接用了
line-height或vertical-align，bottom: 0可能不准，建议改用bottom: 0.1em微调，比像素值更适配字号变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
