CSS3 鼠标上移后底部线条从中间向两边展开

css代码如下

.header-nav li a:after {
	content: "";
	height: 3px;
	position: absolute;
	bottom: 0;
	left: 51%;
	right: 51%;
	z-index: -1;
	background-color: #d82019;
	-o-transition-property: left, right;
	-moz-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-property: left, right;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
}
.header-nav li:hover a:after{
	left: 0;
	right: 0;
	z-index: 1;
}