Text-underline-animation

dabblet.css

/**
 * Text-underline-animation
 */

a {
	font-size: 500%;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) bottom / 0 .1em no-repeat;
	transition: 1s background-size;
}

a:hover {
	background-size: 100% .1em;
}

/* Variations */
a.left {
	background-position: left bottom;
}

a.right {
	background-position: right bottom;
}

dabblet.html

<p>Hover over the following links:
<p><a href="http://lea.verou.me" class="left">From left</a>
<p><a href="http://lea.verou.me" class="center">From center</a>
<p><a href="http://lea.verou.me" class="right">From right</a>

dabblet.js

// alert('Hello world!');

settings.json

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