navlink悬停下划线滑入需用::after伪元素+scalex()动画：父元素设position:relative，伪元素absolute定位到底部，transform-origin:left center，默认scalex(0)，hover时scalex(1)，transition写在默认状态。
NavLink 悬停时下划线从左到右滑入
Bootstrap 5 默认的 NavLink（比如 nav-link 类）没有下划线动画，需要自己加 CSS。最常用且兼容性好的做法是用伪元素 ::after + transform: scaleX() 实现平滑缩放滑入效果。
关键点：必须设 position: relative 在父元素上，否则 ::after 无法精确定位；scaleX(0) 初始隐藏，transition 要写在默认状态而非 :hover 中，否则首次悬停无动画。
- 给
.nav-link添加position: relative; overflow: hidden; - 添加
::after伪元素：宽度 100%、高度 2px、背景色、绝对定位到底部居中 -
transform-origin: left center;确保从左开始缩放 - 默认
transform: scaleX(0);，悬停时transform: scaleX(1);
.nav-link {
position: relative;
overflow: hidden;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #0d6efd; /* Bootstrap primary */
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
.nav-link:hover::after {
transform: scaleX(1);
}
NavLink 下划线用 border-bottom 实现不了平滑动画？
直接对 border-bottom 做 transition 是无效的——CSS 不支持 border-width 或 border-color 的中间过渡动画（浏览器会“跳变”）。即使写了 transition: border-bottom 0.3s，实际效果也是瞬间出现/消失，没有滑入感。
所以别碰 border-bottom 动画。用伪元素是唯一可靠方案。如果非要“看起来像 border”，可以把伪元素 height 设为 1px 并调高 background-color 对比度，视觉上和 border 几乎一致。
-
border-bottom: 2px solid #0d6efd;+transition❌ 不生效 - 伪元素 +
scaleX✅ 可控、顺滑、可反向收起 - 若需“悬停时仅下划线动，文字不动”，确保不给
.nav-link加padding-bottom或margin-bottom干扰布局
React Router 的 NavLink 组件怎么加这个动画？
React Router v6 的 NavLink 渲染后最终也是带 nav-link class 的 <a></a> 标签，所以上面的 CSS 完全适用，无需额外处理。但要注意：如果用了 className={({ isActive }) => isActive ? "nav-link active" : "nav-link"} 这种动态 class，要确保 nav-link 始终存在，否则伪元素规则不匹配。
- CSS 选择器用
.nav-link即可，不用改 - 避免只写
.active::after——那只会作用于激活态，不是悬停态 - 如果项目用 CSS Modules 或 styled-components，把样式作用域正确绑定到
NavLink外层容器或全局 class 上
移动端点击 NavLink 下划线闪一下？
这是 iOS Safari 和部分安卓浏览器的“点击反馈高亮”导致的：点击瞬间触发 :active，如果没重置，可能让 ::after 短暂显示。解决方案是在 :active 状态里强制关闭动画：
.nav-link:active::after {
transform: scaleX(0);
}
另外，如果用 touch-action: manipulation 优化点击响应，也要注意它不影响伪元素行为，只是加快点击反馈，不能替代 :active 重置。
真正容易被忽略的是：动画 transition 时间太短（比如 0.1s）在低端设备上可能被系统点击反馈盖过，建议保持 0.25s–0.35s 区间，既灵敏又可见。
