通过伪类after，hover移入后改变after宽度从而实现效果
实现代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#w_y_nav{
height: 100px;
width: 100%;
list-style: none;
cursor: pointer;
overflow: hidden;
background: #000000;
position: relative;
}
#w_y_nav>li{
float: left;
width: 150px;
height: 58px;
text-align: center;
line-height: 58px;
position: relative;
top: 50%;
margin-top: -29px;
margin-left: 50px;
color: white;
}
#w_y_nav>li:nth-of-type(1){
margin-left: 300px;
}
#w_y_nav>li:after{
content: "";
width: 0;
height: 3px;
position: absolute;
background: white;
top: 100%;
right: 50%;
transition: all .5s;
}
#w_y_nav>li:hover:after{
width: 100%;
right:0;
}
</style>
</head>
<body>
<ul id="w_y_nav">
<li>我要寄件</li>
<li>运单追踪</li>
<li>服务支持</li>
</ul>
</body>
</html>
萌新一位，希望多多支持，共同进步！！
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)