CSS 菜单下划线 Animation

Question

当用户将鼠标悬停在导航栏中的链接上时，我正在尝试按照 codepen 上的本教程制作动画下划线。 目前，我有这条线出现，但只在整个导航列表下方显示一个下划线。 我正在尝试实现出现在悬停链接下方的线条。

 .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

您需要将相对的 position 添加到.link ，以便下划线相对于链接的 position。 然后只需设置下划线的顶部或底部 position 使其出现在链接的底部。

.link { position: relative }

Answer 2

您必须在 CSS 中添加此元素：

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