直接用transform: scalex()配合::after伪元素实现平滑下划线跟随，因伪元素可脱离文本流、精准定位与变换；border-bottom无法独立动画，background难对齐且易模糊；需设position: relative于、overflow: hidden于父容器、transform-origin: center bottom确保居中生长。
直接用 transform: scaleX() 配合 ::after 伪元素就能实现平滑下划线跟随，不需要 JS，但必须注意父容器的 overflow: hidden 和子项的 position: relative。
为什么用 ::after 而不是边框或背景？
边框（border-bottom）无法独立控制宽度和位移；背景（background）难以精准对齐文字底部且缩放时易模糊。伪元素能完全脱离文本流，自由定位 + 变换，是唯一可靠方案。
关键点：
-
::after必须设为position: absolute，并放在position: relative的<a></a>内部 - 初始
transform: scaleX(0)，hover 时过渡到scaleX(1) - 父级导航容器（如
<nav></nav>或<ul></ul>）需加overflow: hidden，否则缩放时伪元素会溢出
transform-origin 设在哪才对齐文字底部？
下划线要从文字正下方中心展开，不是从左边缘拉伸。所以必须把变换原点设在底部中点：
nav a::after {
transform-origin: center bottom;
}
如果设成 left bottom，动画会从左往右“爬”，看起来像加载条；设成 center bottom 才是真正居中生长。注意：这要求伪元素本身宽度设为 100%，高度设为 2px（或其他所需粗细）。
如何让下划线只在当前 hover 项出现，且不跳动？
常见错误是给所有 a::after 都写 transition，结果鼠标快速划过多个项时，下划线会“抢跑”或残留。正确做法：
- 只在
a:hover::after中触发transform: scaleX(1)，而非在默认状态设scaleX(0) - 把
transition写在默认伪元素上（不是 hover 状态），例如：transition: transform 0.3s ease - 确保每个
<a></a>有固定padding-bottom（比如8px），避免 hover 时文字被下划线顶起造成跳动
移动端点击区域太小怎么办？
纯文字链接在手机上难点击，但加 padding 又会让下划线变宽、错位。解决方案是分层处理：
- 保持
<a></a>的padding-bottom不变（用于下划线定位） - 用
::before伪元素覆盖整个可点击区域（top: 0; left: 0; width: 100%; height: 100%），并设z-index: -1 - 这样下划线（
::after）仍在底部，点击热区（::before）扩展到全高，互不干扰
复杂点在于多个伪元素叠加时的层级和尺寸控制——稍不注意就会遮住文字或让动画卡顿，建议先在桌面端调准再适配移动端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
