<h1>
  <a href="#" class="underline">Underline Effect</a>
</h1>

/* CENTERING CONTENT */
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.underline {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(
      to top,
      #005fff 0%,
      #005fff 10%,
      transparent 10.01%
    )
    no-repeat left bottom / 0 100%;
  transition: background-size 0.5s;
}
.underline:hover {
  background-size: 100% 100%;
}