Bootstrap4导航链接活动顶部边框样式

Question

我正在尝试获取这种导航链接样式

在移动设备上查看活动链接应该是这样=>

现在使用边框和边框颜色我得到了这个=>

各自的移动视图

有什么解决方案可以获得预期的结果吗？

当前代码

<nav class="navbar navbar-expand-lg navbar-light ">
    <a class="navbar-brand" href="#">
      LOGO
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a  class="nav-link " href="#">Home</a>
        </li>
        <li class="nav-item" >
          <a  class="nav-link" >Services</a>
        </li>
        <li class="nav-item" >
          <a  class="nav-link" >About</a>
        </li>

        <li class="nav-item" >
          <a  class="nav-link" >Contact</a>
        </li>




      </ul>
    </div>
  </nav>

激活链接无效

.navbar-nav > .active a
  color: $nav-active-color !important


.navbar-nav > .active
  border-top: 3px solid $nav-active-color !important

Answer 1

这对于:before或:after伪类是一个很好的用法，但是如果没有您的任何代码，我只能提出这个模糊的建议。

同样，值得一提的是在嵌套伪类的线程上看到accepted answer here，以防万一遇到上述问题之一。

从那里，您可以添加一些关键帧并平滑过渡，以制作出非常无缝的悬停动画。

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:before {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  top: -4px;
}

<div></div>