下划线动画不动，主要是::after未设初始scalex、transition及position: relative；居中扩散需transform-origin: center；transition须写在默认状态；safari需translatez(0)触发gpu加速。
下划线动画用 ::after 伪元素 + scaleX 实现时，为什么不动？
动不起来，大概率是没给 ::after 设定初始缩放和过渡；或者父元素没设 position: relative，导致伪元素脱标乱飘。
-
::after必须有content: ""、display: block（或inline-block），否则不渲染 - 下划线要居中扩散，得用
transform-origin: center，不是默认的左上角 - 必须显式声明
transition: transform 0.3s ease，仅写transform不会触发动画 - 父元素若为
inline（比如<a></a>），需加position: relative，否则absolute定位的伪元素会相对于最近定位祖先偏移，可能完全不见
a:hover 触发下划线中心展开，但鼠标移开后回弹卡顿
回弹不顺，通常是 transform 过渡没覆盖「进入」和「离开」两个方向，或者用了 scaleX(0) → scaleX(1) 却忘了重置 transform-origin 位置。
- 确保 hover 和非 hover 状态都定义了
transform，比如默认transform: scaleX(0)，hover 时transform: scaleX(1) - 别只在
:hover里写transition，要写在默认状态（即a::after规则里），否则移出时无过渡 - 如果文字有 padding 或 line-height 导致下划线垂直位置偏高，用
bottom: 0+height: 1px更稳，别依赖top: 100%
在 Flex 或 Grid 容器里，::after 下划线偏移或错位
Flex/Grid 会改变子元素的对齐行为，而 ::after 是绝对定位，它的 left: 0 / right: 0 参照的是包含块，不是文字本身。
- 避免对父元素设
align-items: center同时又让::after用bottom: 0——它会贴到 flex 容器底边，而不是文字底线 - 更可靠的做法：把
::after的width设为100%，left和right都不设，靠transform-origin: center控制缩放中心 - 如果父元素有
text-align: center，记得::after也要继承，否则缩放中心可能偏左
需要兼容 Safari 或旧版 Chrome，scaleX 动画闪一下才开始
Safari 对 transform 的硬件加速触发敏感，纯 scaleX 在某些版本里不会自动启用 GPU，导致首帧掉帧。
- 强制开启合成层：给
::after加transform: scaleX(0) translateZ(0)，translateZ(0)是无害的 hack - 不要用
width动画替代scaleX——它会触发重排，性能差得多 - IE 完全不支持
scaleX，如果还要兼容，得 fallback 到width+opacity，但那是另一套逻辑了
真正难的不是写出能动的代码，而是让 scaleX 始终以文字为中心展开，且在各种布局上下文里不偏不跳。父元素的定位方式、行内盒模型、字体度量，都会悄悄影响那个「中心」到底在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
