Bootstrap 5 原生不支持 .nav-link 悬停下划线动画，需手动通过 ::after 伪元素实现：.nav-link 必须设 position: relative；::after 初始态含 transform: scaleX(0) 和 transition: transform；hover 时仅设 transform: scaleX(1)。
Bootstrap 5 原生不提供 .nav-link 悬停下划线动画，你看到的“没反应”或“一闪而过”，大概率是自定义的 ::after 伪元素规则写错了位置、缺了关键声明，或者被 Bootstrap 的高权重 hover 规则干扰了。
为什么 .nav-link:hover 下划线不触发动画？
常见原因不是代码没写，而是几个关键点漏掉了：
-
.nav-link没设position: relative，导致::after相对整个页面定位，一 hover 就飘走 - 过渡（
transition）写在:hover状态里，而不是初始态，动画压根不触发 - 用了
width过渡但父元素是行内元素（display: inline），width不生效 - 写了
transition: all 0.3s，结果其他属性（如color）也参与过渡，干扰预期效果
用 transform: scaleX() 实现平滑缩放下划线
比直接改 width 更可靠、更轻量。必须同步处理定位和过渡位置：
- 给
.nav-link加position: relative（否则::after会相对body定位） -
.nav-link::after设为content: ""、position: absolute、bottom: 0.25rem（对应 Bootstrap 的$nav-link-padding-y）、left: 0、width: 100%、height: 2px、background: #0d6efd - 初始态加
transform: scaleX(0)和transform-origin: left center -
transition: transform 0.25s ease必须写在.nav-link::after初始规则里，不能只写在:hover中 -
.nav-link:hover::after只需transform: scaleX(1)，其他不动
如何让 .nav-link.active 也有同样下划线？
删掉任何对 .nav-link.active 直接设 border-bottom 的尝试——它不支持 transform 动画。正确做法是复用同一套伪元素逻辑：
- 保持
.nav-link::after初始规则不变 - 额外加一条：
.nav-link.active::after { transform: scaleX(1); } - 确保
.nav-link的display是inline-flex或inline-block，避免因 flex 布局导致width: 100%失效 - 如果用了
data-bs-toggle="tab"，.active类切换由 Bootstrap 自带，不用额外 JS
下划线“跳变”或“错位”的常见原因
下划线没对齐文字底部、动画中途偏移、或者在不同链接间切换时突然闪一下，基本都是定位或尺寸继承问题：
-
.nav-link如果有padding-bottom，伪元素的bottom: 0会贴到底部内边距边缘，导致下划线悬空 —— 改用bottom: 0.25rem更稳 - 字体大小不一致（比如部分链接用了
small类），会导致伪元素宽度计算错误 —— 统一用width: 100%并确保父元素display: inline-flex或display: inline-block - 用了
text-transform: uppercase但没同步更新伪元素的transform-origin，可能造成缩放中心偏移 —— 显式写transform-origin: left bottom - 如果导航项用了
flex-grow或justify-content: space-between，每个.nav-link宽度不固定，width: 100%就不准 —— 此时得用 JS 获取真实宽度，CSS 方案失效
最常被忽略的是：过渡必须写在伪元素的初始规则里，而不是 hover 态；以及 .nav-link 必须显式设 position: relative，否则 ::after 的绝对定位就失去参照。
