Tab选项卡的下划线本质是border-bottom而非伪元素，需同时设置border-bottom-color和border-bottom-width才生效；若需居中、缩短或圆角效果，则必须用::after伪元素配合position:relative和transform实现。
Tab选项卡的下划线不是伪元素，是 border-bottom
很多人以为 nav-tabs 的激活底线是 ::after 画出来的，结果改了半天没反应——其实 Bootstrap 5 默认用的是 .nav-tabs .nav-link.active 的 border-bottom。你看到的那条蓝线，本质就是个边框，不是动画生成的。
常见错误包括：.nav-link::after 规则写了但完全不生效；加了 !important 还是颜色/粗细改不动；开发者工具里样式被划掉却找不到原因。
- 必须同时覆盖
border-bottom-color和border-bottom-width，只改 color 不够（默认 width 是 0） - 如果父容器有背景色（比如
.nav-tabs自带浅灰底），可能把细线盖住，得调宽或换色 - 移动端小屏下
.nav-link被压缩，border-bottom容易被截断，建议加padding-bottom: 2px预留空间
想实现居中短线或圆角下划线？得用 ::after 重写
原生 border-bottom 只能铺满整个链接宽度。真要“居中”“变短”“带圆角”，就得放弃它，手动用 ::after 伪元素控制。
关键点不是“能不能”，而是“要不要”。多数业务场景没必要复杂化，先确认需求是否超出 border-bottom 能力范围。
- 必须给
.nav-link加position: relative，否则::after无法精确定位 -
::after要设position: absolute; bottom: 0; left: 50%; transform: translateX(-50%)实现居中 - 别混搭
border-bottom和transform: scaleX()，盒模型计算容易出错导致跳变 - 过渡必须写在初始态（非 hover/active 态），否则动画不触发
选择器权重不够，改了也白改
直接写 .nav-link.active { border-bottom: 2px solid #0d6efd; } 没反应，大概率不是语法错，是选择器权重压不过 Bootstrap 默认规则。
Bootstrap 5 的 CSS 权重很高，尤其在 bootstrap.min.css 里，.nav-tabs .nav-link.active 已经带 !important。你写的规则如果太简单，浏览器就按“谁更具体谁赢”忽略它。
- ✅ 正确写法：
.nav-tabs .nav-link.active或#myTab.nav-tabs .nav-link.active - ❌ 错误写法：
.nav-link.active单独用，或.nav-tabs > .nav-link.active（因为.nav-link不是.nav-tabs的直接子元素） - 别用全局重置如
* { border-bottom: none !important }，会影响 modal、alert 等其他组件
动画时长和缓动函数怎么调
下划线动画本质是 width 或 transform: scaleX() 的过渡，不是 JS 控制的。改时长和缓动，只动 CSS 就行。
推荐用 transform: scaleX()：性能更好（GPU 加速），不触发重排，尤其在移动端更顺滑；而 width 动画在行内元素上容易失效或撑开布局。
- 初始态：
.nav-link::after { transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease; } - 激活态：
.nav-tabs .nav-link.active::after { transform: scaleX(1); } - 值必须是完整 transition 语法，不能只写
0.3s；漏掉ease或属性名，动画就退化成瞬间切换 - 如果用了 Sass，可统一通过变量管理，比如自定义
$nav-link-underline-transition
实际改起来最常卡在选择器优先级和伪元素定位配合上。border-bottom 简单直接，::after 灵活但多一层约束——选哪个，取决于你愿不愿意为那点视觉差异多写三行 CSS 和一个 position 声明。
