Loader : demo of pseudo-element animation

dabblet.css

/**
 * Loader : demo of pseudo-element animation
 */

a { display:inline-block; margin-top: 3em}

span {
display:block;
position: relative;
width: 400px;
height: 5px;
border: 1px solid #ddd;
background: linear-gradient(#ddd,#fff);
margin: 1em;
}
span:after {
position: absolute;
top: -1px; left: -1px;
content:"";
height: 5px;
width: 0;
border: 1px solid green;
background: linear-gradient(rgb(0,255,0), rgb(0,150,0));
transition: width 5s;
}

a:hover + span:after { width: 400px; }

dabblet.html

<a href="#">Hover me</a>
<span></span>

settings.json

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