How do I create a text underline animation?

Issue

I'm trying to make an <a> tag element animates in an underline on hover, similar to the first example on this page. Asking this almost feels stupid since the tutorial is RIGHT THERE, but something I'm doing isn't working and I'm not sure why.

Here's what I've got in my CSS

#about-text-box a {
    text-decoration: none;
    font-size: 17pt;
    font-family: 'Silkscreen', cursive;
    color: #ECE0E7;
    text-align: center;
    width: 95%;
    text-shadow: 2px 2px 2px #101400;
    transition: 0.5s;
}

#about-text-box a:hover::after, #about-text-box a:focus::after {
    opacity: 1;
    transform: translate3d(0, 0.2em, 0);

}

#about-text-box a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.1em;
    background-color: inherit;
    opacity: 0;
    transition: opacity 300ms, transform 300ms;;
}

Solution

A few missing properties I noticed:

1. content: '' on a::after is missing. For a pseudo-element, the content property can be empty "", but must be specified.
2. position: relative need to be on a because pseudo-element a::after is using position: relative.
3. a::after is using background-color: inherit but does not seems to have any value that can be inherited. I gave it a value hotpink for now, but this can be customized to any color.
4. I added cursor: pointer on a so it is more matching your desired result.

Hope this will help!

Example: (see live demo with button below)

#about-text-box {
  display: flex;
}

#about-text-box a {
  display: block;
  position: relative;
  padding: 0.2em 0;
  cursor: pointer;
  text-decoration: none;
  font-size: 17pt;
  font-family: "Silkscreen", cursive;
  color: #ece0e7;
  text-align: center;
  text-shadow: 2px 2px 2px #101400;
  transition: 0.5s;
}

#about-text-box a:hover::after,
#about-text-box a:focus::after {
  opacity: 1;
  transform: translate3d(0, 0.2em, 0);
}

#about-text-box a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: hotpink;
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}

<div id="about-text-box">
  <a>Hover this link</a>
</div>

Answered By - John Li