How do I make an underline hover like this?

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.

Solution

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!