CSS文本下划线动画实现方法

回弹不顺，通常是 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 始终以文字为中心展开，且在各种布局上下文里不偏不跳。父元素的定位方式、行内盒模型、字体度量，都会悄悄影响那个「中心」到底在哪。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS文本下划线动画实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。