underline-text.css

.underline-text {
  display: inline-block;
  position: relative;
  text-decoration: none;
  /* This is the key. The lines that this border applies to must be 'inline'. */
  display: inline;
  background-image: linear-gradient(to bottom, transparent 20%, #00e692 21%);
  /* This ensures the line appears at the right vertical position on each line. 1em will correspond exactly to the height of the font. */
  background-position: 0 1em;
  background-repeat: no-repeat;
  /* Need to apply background size so the animation can work. We'll animate it to '100%'. The 6px refers to the height. */
  background-size: 0% 6px;
  transition: background-size 0.5s ease-in-out 0.2s;
}

.underline-text:hover {
  background-size: 100% 5px;
}