用 transform: scaleX() 而非 width 实现下划线动画，因 width 触发重排导致卡顿，而 scaleX() 仅重绘且 GPU 加速；transform-origin 控制缩放中心，需配合 absolute 定位与精确 transition 才能实现流畅滑入效果。
为什么用 transform: scaleX() 而不是 width 做下划线动画
因为 width 变化会触发浏览器重排（reflow），尤其在移动端容易卡顿；transform: scaleX() 属于合成属性，只触发重绘（repaint），GPU 加速更顺滑。Bootstrap 5 的 .nav-link 默认是 display: inline-block，对 width 不敏感，强行设宽还可能撑开布局——这是很多人调不出动画的根源。
transform-origin 怎么影响下划线缩放方向
transform-origin 决定 scaleX() 的缩放中心点。默认是 50% 50%（居中），会导致下划线从中向两边展开；设成 left center 才能实现从左向右滑入效果。
- 从左滑入：
transform-origin: left center;+transform: scaleX(0)→scaleX(1) - 从右滑入：
transform-origin: right center;+ 初始transform: scaleX(0)，悬停时仍写scaleX(1) - 居中展开：
transform-origin: center center;，但需配合left: 50%; transform: translateX(-50%)避免位移
注意：必须和 position: absolute 配合使用，否则 transform-origin 的参照系不明确，缩放会偏移。
常见定位组合错误导致下划线消失或错位
伪元素 ::after 必须满足三个条件才可见且可控：
立即学习“前端免费学习笔记（深入）”；
- 父级（如
.nav-link）显式声明position: relative—— 否则bottom: 0和left: 0无参照 -
::after自身必须含position: absolute; bottom: 0; left: 0; content: ''—— 少一个都会不渲染 - 不能依赖 Bootstrap 默认样式覆盖
.nav-link的position，得手动加!important或提高选择器权重（比如用.navbar-nav .nav-link）
典型错误写法：.nav-link::after { content: ''; width: 100%; height: 2px; background: #007bff; } —— 没定位、没 origin、没 transition，动画压根不会动。
transition 写法必须精确到 transform
写 transition: all 0.3s ease 看似省事，实则危险：它会监听所有可动画属性，一旦其他 CSS 规则意外修改了 color 或 opacity，就会触发多余过渡，导致下划线闪烁或延迟响应。
- 正确写法：
transition: transform 0.3s ease; - 如果同时用
opacity控制淡入，要显式列出：transition: transform 0.3s ease, opacity 0.3s ease; - 缓动函数建议用
ease-out或cubic-bezier(0.34, 1.56, 0.64, 1)，比默认ease更有“跟手感”
真正难的不是写几行 CSS，而是确保伪元素的定位上下文、缩放原点、过渡目标三者完全对齐——漏掉任意一环，动画就只是静态线条。
