bootstrap 5 默认不提供 .nav-link 悬停下划线动画，常见失效原因是伪元素定位缺失、transition 未写在初始态、width 在 inline 元素无效或 transition: all 干扰；正确做法是用 transform: scalex() 配合 position: relative 和绝对定位 ::after 实现平滑缩放。
Bootstrap 5 默认不给 .nav-link 加悬停下划线动画，你看到的“下划线没反应”或“一闪而过”，基本是因为项目里自定义的 ::after 伪元素规则写错了位置、缺了关键声明，或者被 Bootstrap 的高权重 hover 规则干扰了。
为什么 .nav-link:hover 下划线不触发动画？
常见原因不是代码没写，而是几个关键点漏掉了：
-
.nav-link没设position: relative，导致::after相对整个页面定位，一 hover 就飘走 -
transition写在.nav-link:hover::after里，而不是初始态——浏览器只在 hover 时才读这条规则，动画根本不会启动 - 用了
width: 0 → width: 100%，但.nav-link是display: inline（默认），width在 inline 元素上无效 - 写了
transition: all .3s，结果color和background也一起过渡，视觉上“抖一下”
用 ::after 实现平滑下划线的正确写法
核心是用 transform: scaleX() 替代 width，更可靠且不触发重排：
- 给
.nav-link加position: relative（必须） -
.nav-link::after设为：content: ""、position: absolute、bottom: 0.25rem（对应 Bootstrap 5 的$nav-link-padding-y）、left: 0、width: 100%、height: 2px、background: #0d6efd - 初始态加
transform: scaleX(0)和transform-origin: left center -
transition: transform 0.25s ease必须写在.nav-link::after初始规则里，不能只写在 hover 中 -
.nav-link:hover::after只需transform: scaleX(1)，其他不动
组件内链接（如 .dropdown-item、.list-group-item a）下划线失效怎么办？
这些组件内部的链接样式由组件级 CSS 控制，a 或 .nav-link 选择器完全无效：
- 直接覆盖组件类：
.dropdown-item, .list-group-item a { text-decoration: none !important; } - 如果用了
.btn.btn-link包裹a，补一句：.btn.btn-link > a { text-decoration: none !important; } - Vue/React 单文件组件中启用了
scoped？必须用:deep(a)（Vue 3）或/deep/ a（旧版）穿透作用域 - 检查开发者工具的 “Computed” 面板，确认最终生效的
text-decoration来自哪条规则——别猜，看实际层叠结果
去掉下划线后，可访问性容易被忽略的细节
下划线只是交互反馈的一种形式，删掉它之后，必须显式提供替代方案：
- 确保文字与背景对比度 ≥ 4.5:1（可用 axe 浏览器插件验证）
-
:hover和:focus状态至少保留一种视觉变化：颜色加深、背景色、border-bottom 或 outline（但别写outline: none） - 如果用
text-decoration-none类，它已自带:hover和:focus清除逻辑，你得额外补反馈，比如：.text-decoration-none:hover { background-color: #f8f9fa; } - 语义上，无
href的“链接”不该用a标签——改用button+role="link"，天然无下划线且键盘可聚焦
真正麻烦的不是写动画，而是让伪元素在各种 padding、text-transform、flex 布局下都稳稳贴底；一旦父元素宽度不固定（比如 justify-content: space-between），CSS 方案就失效，得切 JS 动态计算——这时候就得承认：不是所有下划线都适合用纯 CSS 跟随。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
