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 就可以了