导航链接下划线动画由自定义的 .nav-link::after 伪元素类控制，通过 width 过渡实现；Bootstrap 5 原生不提供该动画。
导航链接下划线动画由哪个 CSS 类控制
bootstrap
5 的导航项（
）默认没有悬停下划线，你看到的下划线大概率来自自定义样式或第三方插件。原生 bootstrap 只对
设置了
，且 hover 时仅改变颜色，不触发下划线动画。
真正起作用的是你自己写的
或
动画规则。检查浏览器开发者工具里
或其伪元素的样式来源，90% 的情况是项目里已有类似这样的代码：
覆盖默认下划线动画的正确写法
不要试图修改 Bootstrap 源码或用
硬顶，而是用更精确的选择器优先级覆盖。关键点是：必须同时重写伪元素的初始态、过渡属性和 hover 态。
确保
的
和父容器
配合，否则下划线位置飘移
必须写在初始态（非 hover 态），否则动画不触发
避免用
+
混搭，容易因盒模型计算出错导致动画跳变
如果导航项有 padding，下划线需用
+
定位，别依赖 margin
推荐写法：
为什么改了 CSS 但动画还是不生效
常见原因不是语法错，而是被其他样式拦截或条件未满足：
被包裹在
外又套了
，结果你写的
生成在
上，但定位参考的是
—— 检查 computed styles 里的
和
Bootstrap 的
类设置了
，和你的
下划线重叠，视觉上“卡顿”—— 给
加
用了
或
单位定义
，但在根字体缩放后下划线变细或消失——统一用
CSS 文件加载顺序错，你的样式表在 Bootstrap 之后但被更高优先级的组件样式覆盖——用
看哪条规则被 strike-through
移动端点击后下划线残留怎么处理
真机上点击导航项会触发
状态，部分安卓 WebView 会把
效果“冻结”一帧，导致下划线不收回去。这不是 bug，是触摸事件模拟 hover 的副作用。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
解决方法很简单，加一行重置：
或者更稳妥地，在 JS 里监听
并临时移除 hover 类（但多数场景没必要，直接用上面的 CSS 就够了）。
真正麻烦的是混合使用
或禁用链接的场景——此时
不触发，你的下划线动画自然失效，得换用 JS 控制类名。
.nav-link.nav-linktext-decoration: none:hover::afterborder-bottom.nav-link:hover.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #0d6efd;
transition: width .3s ease;
}
.nav-link:hover::after {
width: 100%;
}!important::afterposition: absoluteposition: relativetransitionborder-bottomtransform: scaleX()bottom: 0left: 0.nav-pills .nav-link,
.nav-tabs .nav-link {
position: relative;
}
.nav-pills .nav-link::after,
.nav-tabs .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #dc3545;
transition: width .25s cubic-bezier(.4,0,.2,1);
}
.nav-pills .nav-link:hover::after,
.nav-tabs .nav-link:hover::after {
width: 100%;
}.nav-link::afterpositionoffsetParent.activeborder-bottom: 2px solid #0d6efd::after.nav-link.active::afterdisplay: nonerememheightpxdevtools → Styles 面板:active:hover.nav-link:active::after {
width: 0 !important;
}touchstartpointer-events: none:hover