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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">*{margin:0;padding:0;}body>div{width:1200px;margin:0auto;}ul#nav{background:#11120D;}ul#navli{display:inline-block;}ul#navlia{position:relative;display:block;color:#fff;text-decoration:none;line-height:50px;margin:010px;}/*这里是主要的效果*/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:3pxsolid#00a78e;color:#00a78e;content:attr(data-hover);-webkit-transition:max-width0.4s;-moz-transition:max-width0.4s;transition:max-width0.4s;}</style></head><body><div><ulid="nav"><li><ahref="#home"data-hover="主页">主页</a></li><li><ahref="#service"data-hover="服务">服务</a></li><li><ahref="#about"data-hover="关于我">关于我</a></li><li><ahref="#home"data-hover="主页">主页</a></li><li><ahref="#service"data-hover="服务">服务</a></li><li><ahref="#about"data-hover="关于我">关于我</a></li><li><ahref="#home"data-hover="主页">主页</a></li><li><ahref="#home"data-hover="主页">主页</a></li><li><ahref="#service"data-hover="服务">服务</a></li><li><ahref="#about"data-hover="关于我">关于我</a></li><li><ahref="#home"data-hover="主页">主页</a></li></ul></div></body></html>