When I finally learned how to build this in 2018, I titled the Codepen demo: Dream Accomplished: Hyperlink Styling. It was a proud moment that I still hold dear.

Hovering over the link transitions the underline set by the ::after pseudo-element from lo to hi or min to max, in this case 5% to 100%;

Code snippet

The style is applied to an hyperlink element. It doesn’t even have to be an hyperlink :)

a {
  font-size: 2rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  position: relative;

  &::after {
    content: "";
    width: 5%;
    height: 3px;
    display: block;
    background-color: #ff6d00;
    transition: all cubic-bezier(0.77, 0, 0.18, 1) 400ms;
  }

  &:hover::after {
    width: 100%;
  }
}