<a href="#" data-text="That cool wiggly underline that people like">That cool wiggly underline that people like</a>

a {
  text-decoration: none;
  position: relative;
  padding-bottom: 1em;
  overflow: hidden;
  color: white;
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    white-space: nowrap;
    content: attr(data-text)attr(data-text);
    color: transparent;
    line-height: 1.8;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: #ffc823;
  }
  &:hover:after {
    animation: wavy-slide 3s linear infinite;
  }
}

@keyframes wavy-slide {
  to {
    margin-left: -51%;
  }
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5353ff;
}