Bootstrap导航栏下划线动画实现方法

如果用 .navbar-nav li a::after 写法，容易被 Bootstrap 的高权重规则（如 .navbar-nav .nav-link:hover）干扰，导致悬停时下划线一闪而过或不触发。

• 推荐直接给 .nav-link 加类或用 !important 确保 position: relative
• 避免用 body .navbar-nav a::after 这类过度具体的选择器，维护性差
• 若项目已用 Sass，可在 _custom.scss 中扩展 .nav-link：

.nav-link {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #007bff;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
  }
  &:hover::after {
    transform: scaleX(1);
  }
}

移动端点击反馈缺失？补上 :focus 和 :active

纯 :hover 在触摸设备上无效，用户点一下就没了动画，体验断裂。必须同时覆盖 :focus（键盘焦点）和 :active（触摸按下态）。

尤其当导航项支持键盘操作（无障碍需求）或混合设备访问时，漏掉这两个状态会让下划线“只对鼠标有效”，测试时容易忽略。

• 把悬停样式复制到 &:hover::after, &:focus::after, &:active::after
• :focus 需配合 outline: none（但要保留其他焦点可见方案，比如加边框）
• 注意 Safari 在 iOS 上对 :active 的延迟处理，可加 -webkit-tap-highlight-color: transparent 优化响应

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。