hover时下划线从中间向两端渐变

.nav{
	float: left;
}
.nav ul li {
	float: left;
	position: relative;
}
.nav ul li a{
	color: #FFF;
	font-size: 16px;
	line-height: 80px;
	margin: 0 25px;
}
.nav ul li:hover:before{
    left: 0;
    width: 100%;
    }
.nav ul li:before {
    content: "";
    width: 0;
    border-bottom: 2px solid #e5081c;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: all linear 0.3s;
}
.nav ul li:hover a{
	color: #e5081c;
}
.nav ul .active a{
	color: #e5081c;
}
.nav ul .active:before{
	left: 0;
    width: 100%;
}

			<div class="nav">
				<ul>
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">产品中心</a></li>
					<li><a href="#">新闻资讯</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>