Super-customizable dashed text underlines

dabblet.css

/**
 * Super-customizable dashed text underlines
 * inspired by https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9
 * hover over them too!
 */

body {
	width: 8.4em;
	padding: 1em;
	font: 300%/1.4 Baskerville, Palatino Linotype, serif;
}

a {
	background: linear-gradient(90deg, 
	            slategray 60%, transparent 0) /* 60%: ratio between dash-gap */
	            repeat-x;
	background-size: .25em 2px; /* .25em: Width of dash+gap, 2px: thickness of underline */
	background-position: 0 90%; /* vertical position of underline */
	text-shadow: .05em 0 white, -.05em 0 white; /* create gap between descenders and underline */
	
	/* For hover */
	animation: scroll .5s infinite linear;
	animation-play-state: paused;
}

@keyframes scroll {
	to { background-position: .25em 90%; }
}

a:hover {
	cursor: pointer;
	color: slategray;
	animation-play-state: running;
}

dabblet.html

“The only way to get rid of a <a>temp&shy;ta&shy;tion</a> is to <a>yield</a> to it.”

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}