Skip to content

Instantly share code, notes, and snippets.

@dealloc
Created September 3, 2015 16:33
Show Gist options
  • Save dealloc/a5a8a1c1e9014d310cf7 to your computer and use it in GitHub Desktop.
Save dealloc/a5a8a1c1e9014d310cf7 to your computer and use it in GitHub Desktop.
fancy CSS3 underline
/* ripped from semantic-ui.com */
a
{
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: top;
z-index: 0;
-webkit-transition: color 0.2s;
transition: color 0.2s;
outline: none;
text-decoration: none;
}
a:hover:before
{
background-color: #2C76BF;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
a:before
{
position: absolute;
top: auto;
bottom: 1px;
left: 0;
width: 100%;
height: 1px;
background-color: #4183C4;
content: '';
-webkit-transition: all 0.2s;
-webkit-backface-visibility: hidden;
transition: all 0.2s;
backface-visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment