Question 43241 in Html Question posted in
Some basic documentation can be found here.

How do I make an underline hover like this? – Html

I want to make a CSS underline animation on my website’s navigation, like the one on poosh.com. I have no idea how I make it so that only the navigation items are underlined. Hope y’all understand what I mean.

I tried this:

nav ul {
  display: inline-block;
  position: relative;
  color: #000000;
}

nav ul::after {
  content: '';
  position: relative;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 12px;
  left: 0;
  background-color: #000000;
  transform-origin: bottom left;
  transition: transform 0.3s ease-out;
}

nav a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

but it doesn’t work.

Tags:

4

Answers


  1. 0

    You have to li after ul like this:

    nav ul li{
  ...
}
    Login or Signup to reply.
  2. 0 
    if html code is like --> 
class="hover-underline-animation">YOUR TEXT HERE!
the css to do that you want is -->
.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
    Login or Signup to reply.
  3. 0 
    nav ul {
        display: inline-block;
        position: relative;
        color: #000000;
      }

      nav a {
        position: relative;
        text-decoration: none;
        color: inherit;
      }

      nav a::before {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 1px;
        bottom: -2px;
        left: 0;
        background-color: #000000;
        transform-origin: bottom left;
        transition: transform 0.3s ease-out;
      }

      nav a:hover::before {
        transform: scaleX(1);
      }

    Changes made:

    • Removing the ::after from the ul, as we want to add the underline to the a tags instead.

    • Changing the bottom property of the ::after to -2px, as we want to position the underline just below the text.

    • Removing the transform-origin property from nav a:hover::after, as it’s not needed for the animation.

    Example HTML:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Navigation menu with underline animation on hover</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

    Hope this helps!

    Login or Signup to reply.
  4. 0

    Here we go:

      nav a {
      position: relative;
      text-decoration: none;

  }

  nav a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 0%;
      height: 2px;
      background-color: #000;
      transition: width 0.3s ease-in-out;
  }

  nav a:hover::after {
      width: 100%;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search