/* 💡 Как создать эффект заливки подчеркивания в CSS */
/* 🔗 https://s-sd.ru/blog_studio_design/ehffekt-zalivki-podcherkivaniya/ */

.anim-underline-fx {
  /* reset */
  color: darkblue;
  text-decoration: none;

  /* filling effect */
  background-image: linear-gradient(to right, darkblue 50%, lightsteelblue 50%);
  background-size: 200% 3px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position 0.3s;
}

.anim-underline-fx:hover {
  background-position: 0% 100%;
}

/* demo stuff */
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  font-family: Arial;
}

p {
  max-width: 480px;
  margin: 0px auto;
  font-size: 2rem;
}