纯css 下滑线导航条特效

html:部分

<nav class="navigation">

<div class="wrapper">
<ul class="navigation-list ul-reset">
<li class="navigation-item ib">
<a href="#" class="navigation-link">
Home
</a>
</li>
<li class="navigation-item ib">
<a href="#" class="navigation-link">
About
</a>
</li>
<li class="navigation-item ib">
<a href="#" class="navigation-link">
Contact
</a>
</li>
<li class="navigation-item ib">
<a href="#" class="navigation-link">
FAQ
</a>
</li>
<li class="navigation-item ib">
<a href="#" class="navigation-link">
More
</a>
</li>
</ul>
</div>

</nav>

CSS：部分

a {
color: #009688;
}
a:hover,
a:active {
text-decoration: none;
}
.ib {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: top;
}
.ul-reset {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
}
.wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
}
.header {
text-align: center;
}
.navigation {
background-color: #eee;
font-weight: 700;
}
.navigation-list {
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.navigation-item {
font-size: 1.2rem;
}
.navigation-link {
display: block;
position: relative;
padding: 5px 20px;
text-decoration: none;
color: #333;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.navigation-link:before {
content: "";
position: absolute;
bottom: 0;
width: 0;
border-bottom: solid 2px;
}
.navigation-link:before {
left: 0;
}
.navigation-link:hover {
color: #009688;
}
.navigation-link:hover:before {
width: 100%;
}
.navigation-link:before {
-webkit-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
}
@media only screen and (max-width:1024px) {
.wrapper {
width: 90%;
}
}

 

效果图：