H5+CSS3实现简单菜单下划线动画

废话不说，先上图：

效果是用css3的:after来实现的，不增加或改变html；绝对定位把横线定在菜单顶部或底部，不影响文档流。

•  

代码部分：

/*html*/
<ul>
    <li><a href=#>link1</a></li>
    <li><a href=#>link2</a></li>
    <li><a href=#>link3</a></li>
</ul>

/*css*/
ul,li{
    display:inline-block;
}
a,a:link{
    color:#000;
    text-decoration:none;
    position:relative;
    padding:10px 15px;
}
a:after{
    content: "";
    width: 0;
    height: 3px;
    background: #337ab7;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: all .2s;
}
a:hover:after,a.active:after{
    left: 0%;
    width: 100%;
}

demo效果：

当前页菜单指示只要在a标签加上 .active 就可以了