Bootstrap 5 原生不提供下划线动画，.nav-link 默认仅取消下划线并变色；悬停无动画主因是缺失 position: relative、transition 未写在初始态、width 在 inline 元素上无效或误用 transition: all。
为什么 .nav-link 悬停没下划线动画？
Bootstrap 5 原生不提供任何下划线动画，.nav-link 默认只有 text-decoration: none 和 hover 颜色变化。你看到的下划线几乎肯定是项目里自定义的 ::after 伪元素，但常因几个关键点缺失而失效：
-
.nav-link缺少position: relative，导致::after定位飘移 - 过渡（
transition）写在:hover状态里，而不是初始态，动画压根不触发 - 用了
width过渡但父元素是行内元素（display: inline），width不生效 - 写了
transition: all 0.3s，结果其他属性（如color）也参与过渡，干扰预期效果
怎么用 ::after 实现平滑缩放下划线？
核心是用 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)，其他不动
active 状态下划线怎么自动跟随？
想让当前激活项也有同样动画，不是靠 JS 计算位置，而是复用同一套伪元素逻辑：
- 删掉所有对
.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%失效 - 如果导航项用了
text-transform: uppercase，记得在::after里显式写transform-origin: left bottom，否则缩放中心偏移
常见错位和跳变怎么修？
下划线“悬空”“闪一下”“切换时抖动”，基本都出在尺寸继承或盒模型上：
- 不要依赖
margin或padding推算bottom值，固定用bottom: 0.25rem（Bootstrap 5 默认 y 内边距） - 字体大小不一致（比如部分链接加了
small类），会导致width: 100%计算错误——统一用display: inline-flex+align-items: center更稳 - 导航用了
justify-content: space-between，每个.nav-link宽度不固定，width: 100%就不准；此时只能用 JS 获取真实offsetWidth设置::after宽度 - 动画时间别设太长，
0.25s是多数场景的平衡点：太快看不出，太慢拖沓
真正起作用的是你写的那几行 ::after 规则，不是 Bootstrap 自带的；但每一处 position、transform-origin、transition 位置，都得严丝合缝，差一点就动不了。
