效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
*{margin:0px;padding:0px;list-style:none;}
body{font-family:'Microsoft Yahei';}
ul{margin-top:10px;}
a,a:hover{text-decoration:none;}
a{display:block;width:100px;padding-bottom:15px;
height:20px;line-height:20px;text-align: center;
font-size:14px;color:#000;transition:all .3s linear;
position:relative;
}
a:hover{color:#f00;}
a:after{
content:'';
display:block;
width: 100%;
overflow:hidden;
height:19px;
line-height:0px;
border-bottom:1px solid red;
position:absolute;
left:0px;
top:0px;
transition:all .3s linear;
transform:scaleX(0);
}
a:hover:after{
transform:scaleX(.9);
}
</style>
</head>
<body>
<ul>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >测试内容1</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >测试内容2</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >测试内容3</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >测试内容4</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >测试内容5</a></li>
</ul>
</body>
</html>
