必须设 width: 0 而非 auto 才能过渡；推荐 transform: scaleX(0)→scaleX(1)，因不触发重排、性能更好、兼容性强，且避免文字长度变化时下划线错位。
用 ::after 伪元素加下划线，但 hover 时宽度不过渡？
根本原因是默认 ::after 的 width 是 0 或 auto，而 CSS 过渡只对可计算的数值型属性生效——width: auto 无法过渡。必须显式设为 width: 0，再在 hover 中设为具体值（比如 width: 100%）。
常见错误写法：width: auto + transition: width .3s → 完全不动。
- 务必给
::after设content: ""、display: block、width: 0和height（比如2px） - 父元素需设
position: relative，否则::after无法绝对定位到文字下方 - 过渡要写在非 hover 状态上，不是 hover 里写
transition
文字长度变化时，下划线总比文字短一截？
这是因为 ::after 默认继承父元素的 width，但若父元素是内联元素（如 <span> 或 <a>），它的 width 计算逻辑不适用于伪元素定位。得靠 left/right 配合 transform 或直接用 width: 100%，但前提是父元素能正确撑开宽度。
- 最稳方案：把触发元素设为
display: inline-block，再让::afterwidth: 100% - 如果文字是响应式或含换行，改用
transform: scaleX(0)→scaleX(1)过渡，它不依赖宽高计算，更可靠 - 避免用
left: 0; right: 0模拟 100% 宽度——在 inline 元素里会失效
transform: scaleX() 和 width 过渡哪个更推荐？
transform 更轻量、更稳定，尤其适合动态文本或需要动画性能的场景。浏览器对 transform 的硬件加速支持更好，不会触发重排（reflow），而 width 变化会强制重排布局。
立即学习“前端免费学习笔记（深入）”；
- 用
scaleX(0)初始状态，hover 时设scaleX(1)，配合transform-origin: left center控制起始点 - 注意：若下划线颜色/粗细需随文字变化，
transform不影响盒模型，样式仍走正常继承；width方案则可能因尺寸缩放导致边缘模糊（尤其小字号） - 兼容性无差别：现代浏览器都支持
transform过渡，IE10+ 也 OK
移动端点击后下划线残留、hover 效果错乱？
iOS Safari 和部分安卓 WebView 会对 :hover 做延迟或模拟处理，导致伪元素过渡在触摸后“卡住”或误触发。这不是代码 bug，而是 UA 对 hover 的实现策略问题。
- 别只依赖
:hover，加一层:focus（对<a>或带tabindex的元素）覆盖键盘/屏幕阅读器场景 - 真要兼容触摸设备，用 JS 监听
touchstart给元素加临时 class，CSS 写.underline-active::after规则 - 避免在
:hover里同时改color和transform—— 多属性过渡容易在低端设备上掉帧
真正难搞的是字体加载完成前的宽度计算误差，以及 WebKit 下 inline-block 在 font-display: swap 时的重绘抖动——这些没法靠纯 CSS 解决，得结合 requestAnimationFrame 或 ResizeObserver 微调。
