Skip to content

Instantly share code, notes, and snippets.

@capgunmedia
Last active August 13, 2016 22:11
Show Gist options
  • Save capgunmedia/e887239fa51f4f3edfaae46faac6784e to your computer and use it in GitHub Desktop.
Save capgunmedia/e887239fa51f4f3edfaae46faac6784e to your computer and use it in GitHub Desktop.
Navigation Underline
.underlined-example-wrapper {
padding: 30px;
background-color: #7E789B;
display: inline-block;
}
.underlined-example {
padding: 6px;
position: relative;
color: #fff;
text-decoration: none;
font-size: 16px;
display:inline-block;
font-family: 'Work Sans', sans-serif;
font-weight:400;
}
.underlined-example:hover {
color: #fff;
}
.underlined-example:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #fff;
visibility: hidden;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
.underlined-example:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment