CSS菜单下划线动画

Question

我正在尝试遵循codepen上的this教程，当用户将鼠标悬停在导航栏中的链接上时，可以制作动画下划线。目前，我已经显示了这一行，但只在整个导航列表下显示了一个下划线。我正在尝试实现显示在悬停链接下面的线条。

​

.navbar-fixed-left .navList a.link {
  text-decoration: none;
}


/*Removing bullet points */

.navbar-fixed-left .navList li {
  list-style-type: none;
}

.link::before {
  transition: 300ms;
  height: 2px;
  content: "";
  position: absolute;
  background-color: #031D44;
}

.link-ltr::before {
  width: 0%;
  bottom: 10px;
}


/* Length of the line */

.link-ltr:hover::before {
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-left mt-4">
  <ul class="navList">
    <li><a class="link link-ltr" href="about.html">About</a></li>
    <li><a class="link link-ltr" href="resume.html">Resume</a></li>
    <li><a class="link link-ltr" href="projects.html">Projects</a></li>
    <li><a class="link link-ltr" href="databasediagram.html">Database Diagrams</a></li>
    <li><a class="link link-ltr" href="apiunittests.html">API Unit Tests</a></li>
    <li><a class="link link-ltr" href="bucketlist.html#">Bucket List</a></li>
  </ul>
</div>

​

如有任何帮助，将不胜感激，谢谢！

Answer 1

您需要向.link添加一个相对位置，以便下划线相对于链接的位置。然后只需设置下划线的顶部或底部位置，使其显示在链接的底部。

.link { position: relative }

Answer 2

您只需在CSS中添加此元素：

.link {
  padding: 20px 0px;
  display: inline-block;
  position: relative;
}