<a href="#">Testing underline animation on hover</a>

a {
  text-decoration: underline red;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}
a:hover {
  animation: underline 0.6s infinite;
}
@keyframes underline {
  0% {
    text-underline-offset: 1px;
  }
  33% {
    text-underline-offset: 10px;
  }
  66% {
    text-underline-offset: -10px;
  }
  100% {
    text-underline-offset: 1px;
  }
}
@media (prefers-reduced-motion) {
  a:hover {
    animation: none;
    text-decoration-thickness: 2px;
  }
}