Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Loader : demo of pseudo-element animation
/**
* 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; }
<a href="#">Hover me</a>
<span></span>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.