nav-tabs 的激活底线默认是 border-bottom，不是伪元素；不显示主因是 border-bottom-width 为 0、被父容器浅灰背景遮盖或选择器权重不足，须用 .nav-tabs .nav-link.active 显式设置三属性并预留 padding-bottom 空间。
nav-tabs 的激活底线默认是 border-bottom，不是伪元素；不显示，基本是因为这条边框被覆盖、宽度为 0、或父容器背景遮住了。
为什么写了 border-bottom 却看不见？
常见现象包括：写了 border-bottom: 2px solid #0d6efd 但完全没反应；或只有一条极细灰线；或颜色对不上。根本原因不是漏写，而是 Bootstrap 5 的默认规则已设 border-bottom-width: 0（尤其在浅色主题下），你只改 color 或 style 不会触发渲染。
-
.nav-tabs .nav-link.active默认只继承了border-bottom-color和border-bottom-style，width是 0 —— 必须显式设border-bottom-width - 父容器
.nav-tabs带浅灰背景（background-color: #f8f9fa），细线容易被“吃掉”，尤其在高 DPI 屏幕上 - 某些定制版 Bootstrap（如从 CDN 加载的 minified 版）里，
.nav-tabs .nav-link.active规则带!important，你写的低优先级规则直接被压 - 移动端小屏下，
.nav-link行高压缩，border-bottom可能被截断，开发者工具里能看到“一半线被裁掉”
怎么让底线真正显示并可控？
关键不是加不加，而是用对选择器、补全属性、留足空间：
- 必须用完整路径：
.nav-tabs .nav-link.active（不能简写成.nav-link.active，否则权重不够） - 拆开写三属性：
border-bottom-width: 2px、border-bottom-style: solid、border-bottom-color: #0d6efd（避免继承干扰） - 加
padding-bottom: 2px预留空间，防止文字贴底导致视觉错位 - 如果用了深色主题（
.nav-tabs.nav-tabs-dark），前缀得补上：.nav-tabs-dark .nav-tabs .nav-link.active - 确保你的 CSS 文件在
bootstrap.min.css之后加载，否则规则无效
想实现居中短线、圆角或动画？别碰 border-bottom
原生 border-bottom 只能铺满整个链接宽度，无法缩放、偏移或加圆角。真要这些效果，必须放弃它，改用 ::after 伪元素手动控制定位和动画。此时 .nav-tabs .nav-link.active::after 才是主力，且初始态必须设 transform: scaleX(0)、transition: transform 0.25s ease 写在伪元素上，而不是 hover 状态里。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是：底线是从文字 baseline 向下画的，而 .nav-link 的 line-height 和字体大小在不同断点下浮动，小屏下可能突然偏高或消失——测试时一定打开响应式调试器，别只看桌面端。
