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

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

					*{			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;		}							
				主页			
			
				服务			
			
				关于我			
			
				主页			
			
				服务			
			
				关于我			
			
				主页			
			
				主页			
			
				服务			
			
				关于我			
			
				主页