CSS Menu Underline Animation

Question

I'm trying to follow this tutorial on codepen to make an animated underline when a user hovers over a link in the navbar. Currently, I have the line appearing but only shows one underline underneath the whole nav list. I am trying to achieve the line appearing underneath the hovered link.

 .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>

Any help would be appreciated thank you!

Answer 1

you need to add a relative position to .link so that the underline will be relative to the link's position. and then just set the top or bottom position of the underline to make it appear on the bottom of the link.

.link { position: relative }

Answer 2

You must just add this element in CSS:

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