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;
}