效果：
代码：
<!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:;">测试内容1</a></li> <li><a href="javascript:;">测试内容2</a></li> <li><a href="javascript:;">测试内容3</a></li> <li><a href="javascript:;">测试内容4</a></li> <li><a href="javascript:;">测试内容5</a></li> </ul> </body> </html>