CSS 菜单下划线动画答案

【问题标题】：CSS Menu Underline AnimationCSS 菜单下划线动画
【发布时间】：2021-05-12 03:28:36
【问题描述】：

当用户将鼠标悬停在导航栏中的链接上时，我正在尝试按照 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>

任何帮助将不胜感激谢谢！

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

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

.link { position: relative }

【讨论】：

【解决方案2】：

你必须在 CSS 中添加这个元素：

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

【讨论】：