Underline hover effect
<ul>
<li><a href="#">Lorem</a>
<li><a href="#">Ipsum</a>
<li><a href="#">Dolor sit</a>
<li><a href="#">Amet</a></li>
</ul>
@import url(http://fonts.googleapis.com/css?family=Ubuntu:700);
body {
background-color: #f0f0f0;
font-family: 'Ubuntu', sans-serif;
}
ul {
list-style-type: none;
margin: 0;
text-align: center;
margin-top: 10%;
}
ul li {
display: inline-block;
margin: 0 20px;
}
a {
font-size: 20px;
color: #584E4A;
position: relative;
text-transform: uppercase;
text-decoration: none;
padding-bottom: 8px;
}
a:before, a:after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
right: 0;
height: 2px;
background-color: #F37272;
}
a:before {
opacity: 0;
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-transition: -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}
a:after {
opacity: 0;
-webkit-transform: translateY(4px);
-ms-transform: translateY(4px);
transform: translateY(4px);
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
a:hover:before, a:hover:after, a:focus:before, a:focus:after {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
a:hover:before, a:focus:before {
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
a:hover:after, a:focus:after {
-webkit-transition: -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
}