nav-tabs 的 active 底线是 border-bottom 而非伪元素；需直接修改 .nav-tabs .nav-link.active 的 border-bottom-color 和 border-bottom-width，注意优先级、父容器背景遮挡及移动端截断问题。
nav-tabs 的 active 底线其实是 border-bottom，不是伪元素
Bootstrap 5 的 .nav-tabs .nav-link.active 默认用的是 border-bottom（白色底色 + 深色下边框），不是 ::after 动画。很多人误以为要改伪元素，结果查开发者工具发现样式根本没生效——因为压根没用它。
常见错误现象：nav-link::after 规则写了但没反应；加了 !important 还是被覆盖；底线颜色/粗细改不掉。
- 直接定位到
.nav-tabs .nav-link.active，改它的border-bottom即可 - 必须覆盖
border-bottom-color和border-bottom-width，只改 color 不够（默认 width 是 0） - 如果父容器有
background，记得检查是否遮挡了底线——比如.nav-tabs自带浅灰背景，会盖住细线 - 移动端小屏下，
nav-link可能被压缩，导致border-bottom被截断，建议加padding-bottom: 2px预留空间
为什么加了 !important 还不生效？选择器优先级不够
Bootstrap 5 的 CSS 优先级很高，尤其在 dist/css/bootstrap.min.css 里，.nav-tabs .nav-link.active 已经带了 !important。你写的 #myTab .nav-link.active 如果没加 ID 或类名组合，照样被压。
典型失效写法：.nav-link.active { border-bottom: 2px solid #0d6efd !important; }
- ✅ 正确做法：提高特异性，比如
.nav-tabs .nav-link.active或#myTab.nav-tabs .nav-link.active - ❌ 错误写法：
.nav-link.active单独用，或写成.nav-tabs > .nav-link.active（Bootstrap 5 中.nav-link不是.nav-tabs的直接子元素，而是嵌套在.nav-item里） - 别依赖全局重置：不要用
* { border-bottom: none !important }，会影响其他组件 - 如果用了 Sass，直接在
$nav-tabs-link-active-border-color变量里改，编译后最干净
想让底线居中、变短、带圆角？得用 position + ::after
原生 border-bottom 只能铺满整个链接宽度。真要实现“居中短线”“渐变过渡”“圆角底边”，就得放弃 border，改用 ::after 伪元素手动控制。
关键点不是“能不能”，而是“要不要”——多数项目其实不需要这么复杂，先确认需求是否真超出 border 能力范围。
- 必须给
.nav-link加position: relative，否则::after无法精确定位 -
::after的bottom: 0和left: 50%+transform: translateX(-50%)实现居中短线 - 动画必须写在初始态：
.nav-link::after { transition: width .2s ease; }，否则 hover 时没过渡 - 如果
.nav-link有 padding，::after的width建议设为60%而非100%，避免撑开容器
移动端点击区域变小？别动 border-bottom，改 padding
有人为了“让底线更醒目”把 padding-bottom 设成 0，结果手指点不到链接——因为 nav-link 的可点击区域只剩文字高度。
底线本身不响应点击，真正影响交互的是 padding 和 min-height。
- 底线样式和点击热区要分开处理：底线归底线，热区归
padding - 推荐最小安全值：
padding: 0.5rem 1rem（Bootstrap 5 默认就是这个） - 如果用
::after做底线，千万别给它设pointer-events: none——虽然不影响点击，但会干扰屏幕阅读器识别 - 在 iOS Safari 上，
border-bottom有时渲染模糊，可用transform: scaleY(0.999)强制重绘
实际中最容易被忽略的，是 .nav-tabs 容器本身的 border-bottom。它和 .nav-link.active 的底线叠加后，可能形成双线效果，看着像 bug。动手前，先用开发者工具关掉父容器的 border-bottom 看看是不是它在捣鬼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
