鼠标滑过字体颜色从左向右渐变

鼠标滑过字体颜色从左向右渐变:

成都创新互联专注于网站建设、成都网站建设、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户，用严谨的态度对待客户，用专业的服务创造价值，成为客户值得信赖的朋友，为客户解除后顾之忧。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body>div{
			width: 1200px;
			margin:0 auto;
		}
		ul#nav{
			background: #11120D;
		}
		ul#nav li{
			display: inline-block;
		}
		ul#nav li a{
			position: relative;
    		display: block;
			color:#fff;
			text-decoration: none;	
			line-height: 50px;
			margin:0 10px;
		}
		/*这里是主要的效果*/
		a:hover {
		    color: #00a78e;
		}
		a:hover::before {
		    max-width: 100%;
		}
		a::before{
			position: absolute;
		    top: 0;
		    left: 0;
		    overflow: hidden;
		    max-width: 0;
		    height: 80%;
		    border-bottom: 3px solid #00a78e;
		    color: #00a78e;
		    content: attr(data-hover);
		    -webkit-transition: max-width 0.4s;
		    -moz-transition: max-width 0.4s;
		    transition: max-width 0.4s;
		}

	</style>
</head>
<body>
	<div>
		<ul id="nav">
			<li>
				<a href="#home" data-hover="主页">主页</a>
			</li>
			<li>
				<a href="#service" data-hover="服务">服务</a>
			</li>
			<li>
				<a href="#about" data-hover="关于我">关于我</a>
			</li>
			<li>
				<a href="#home" data-hover="主页">主页</a>
			</li>
			<li>
				<a href="#service" data-hover="服务">服务</a>
			</li>
			<li>
				<a href="#about" data-hover="关于我">关于我</a>
			</li>
			<li>
				<a href="#home" data-hover="主页">主页</a>
			</li>
			<li>
				<a href="#home" data-hover="主页">主页</a>
			</li>
			<li>
				<a href="#service" data-hover="服务">服务</a>
			</li>
			<li>
				<a href="#about" data-hover="关于我">关于我</a>
			</li>
			<li>
				<a href="#home" data-hover="主页">主页</a>
			</li>
		</ul>
	</div>
</body>
</html>