纯 CSS 可实现平滑下划线跟随，核心是用 ::after 伪元素配合 transform: scaleX() 和 transform-origin，需设 .nav-link 为 position: relative，并统一 width: 100%、bottom: 0.25rem 等细节以避免错位。
用 border-bottom + transform: scaleX() 实现平滑下划线跟随
纯 css 就能搞定，不需要 js 监听点击或计算位置。核心是让下划线作为伪元素，宽度从 0 动画到 100%，同时用 transform-origin 控制缩放锚点，再配合 transition 做缓动。
- 必须给
.nav-link设置position: relative，否则伪元素定位会错位 - 伪元素（如
::after）要设content: ""、position: absolute、bottom: 0、left: 0 - 初始状态设
transform: scaleX(0)，激活时设transform: scaleX(1)，过渡写在伪元素上，不是父元素 - 动画时间建议
0.25s左右，太快不明显，太慢拖沓
Bootstrap 5 中覆盖默认 active 样式的方法
Bootstrap 5 的 .nav-link.active 默认只有文字加粗和颜色变化，没有下划线。直接加 border-bottom 会导致所有激活项都带粗线，无法动画 —— 必须用伪元素替代原生边框。
- 删掉任何对
.nav-link.active直接设border-bottom的尝试，它不支持transform动画 - 改用
.nav-link::after+.nav-link.active::after两套规则控制显隐和缩放 - 如果用了
data-bs-toggle="tab"，确保点击后.active类能正确切换（Bootstrap 自带，不用额外 JS） - 注意响应式断点：小屏下
.nav可能变成垂直堆叠，此时下划线方向不变，但视觉上更显眼，需测试
解决下划线“跳变”或“错位”的常见原因
下划线没对齐文字底部、动画中途偏移、或者在不同链接间切换时突然闪一下，基本都是定位或尺寸继承问题。
-
.nav-link如果有padding-bottom，伪元素的bottom: 0会贴到底部内边距边缘，导致下划线悬空 —— 改用bottom: 0.25rem（对应 Bootstrap 的$nav-link-padding-y）更稳 - 字体大小不一致（比如部分链接用了
small类），会导致伪元素宽度计算错误 —— 统一用width: 100%并确保父元素display: inline-flex或display: inline-block - 使用了
text-transform: uppercase但没同步更新伪元素的transform-origin，可能造成缩放中心偏移 —— 显式写transform-origin: left bottom - 如果导航项用了
flex-grow或justify-content: space-between，每个.nav-link宽度不固定，width: 100%就不准 —— 此时得用 JS 获取真实宽度，CSS 方案失效
要不要用 JS 动态计算位置？什么情况下绕不开
纯 CSS 方案在绝大多数静态导航、固定宽度或等宽项中足够用；一旦出现可变宽、居中对齐、响应式折叠/展开，CSS 就力不从心。
- 当导航项文字长度差异极大（如 “Home” vs “Documentation & API Reference”），且容器宽度有限时，
scaleX()会拉伸过度 —— 改用 JS 获取offsetWidth和offsetLeft动态设置width和left - 使用了
justify-content: center的.nav，伪元素left: 0会从容器左边缘开始，而不是链接左边缘 —— 必须 JS 定位 - 需要下划线“滑入滑出”而非缩放（比如从左边滑到当前项），CSS 也能做，但得用
left+width双属性过渡，浏览器渲染压力略大，小项目无所谓 - 如果项目已用 jQuery 或 Vue，监听
shown.bs.tab后手动更新下划线位置，比硬啃 CSS 更快落地
真正麻烦的不是怎么实现，而是下划线要跟谁对齐：文字 baseline？padding 底边？还是整个 link 的 content-box？这个细节定不下来，后面所有计算都会漂移。
