<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;
}