How do I make an underline hover like this?

Question

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.

try this: https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/html-css-practical-exercise-15.php — HDP, Mar 31 '23 at 12:52

score 0 · Answer 1 · edited Mar 31 '23 at 20:53

0

You have to li after ul like this:

nav ul li{
  ...
}

edited Mar 31 '23 at 20:53

Tyler2P

2,324
26
22
31

answered Mar 31 '23 at 12:58

Gaurav Bagouli

1

BANI · Answer 2 · 2023-03-31T13:01:58.543

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

score 0 · Accepted Answer · answered Mar 31 '23 at 13:05

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!

score 0 · Answer 4 · answered Mar 31 '23 at 13:25

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

How do I make an underline hover like this?

4 Answers4