Skip to content

Instantly share code, notes, and snippets.

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 {
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;
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>
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.