jquery - 如何在悬停时间的导航列表中从左到右淡入/动画底边框？

我试图在悬停时间的导航菜单中从左到右底部淡入效果。在这里，我正在使用Bootstrap4。我尝试了以下代码

<nav class="navbar navbar-expand-sm navbar-light">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class='nav-link' href="#">Home      </a></li>
            <li class="nav-item"><a class='nav-link' href="#">About Us  </a></li>
            <li class="nav-item"><a class='nav-link' href="#">Portfolio </a></li>
            <li class="nav-item"><a class='nav-link' href="#">Contact Us</a></li>
        </ul>
</nav>

我为边框添加了一个简单的CSS

.navbar a:hover {
    border-bottom: 1px solid #444;
    color: black;
}

现在，我的导航如下图所示。

jquery - 如何在悬停时间的导航列表中从左到右淡入/动画底边框？-LMLPHP

现在，我需要帮助或提示，以在悬停时间上边框中从左到右进行淡入/动画效果。

最佳答案

add class line to <a class="line"></a> as below
<html>
<li class="nav-item"><a class='line nav-link' href="#">Home      </a></li>
</html>
<style>
.line {
  display: inline;
  position: relative;
  overflow: hidden;
}
.line:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  width: 0;
  bottom: -5px;
  background: #000;
  height: 4px;
  transition-property: width;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.line:hover:after,
.line:focus:after,
.line:active:after {
  left: 0;
  right: auto;
  width: 100%;
}
</style>

关于jquery - 如何在悬停时间的导航列表中从左到右淡入/动画底边框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47504769/