代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
<style type="text/css">
#underline{
200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
#underline:after{
content: "";
0;
height: 1px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{
left: 0%;
100%;
}
</style>
</head>
<body>
<div id="underline"></div>
</body>
</html>
参考文：https://blog.csdn.net/qq_31648761/article/details/72953434?locationNum=9&fps=1
方法二：
<a href=‘‘ class=‘ui-box bottom-inOutSpread‘>Audio Description</a>
css：
.ui-box {
text-decoration:none;
border:none;
font-family:‘Roboto‘, sans-serif;
font-size:14px;
position:relative;
vertical-align:baseline;
padding:10px
}
.bottom-inOutSpread:before,.bottom-inOutSpread:after,.bottom-inOutSpread>.ui-border-element:before,.bottom-inOutSpread>.ui-border-element:after {
content:‘‘;
position:absolute
}
.bottom-inOutSpread:after {
border-bottom:2px solid #333;
left:51%;
right:51%;
bottom:0px;
-webkit-transition-property:all;
-moz-transition-property:all;
-o-transition-property:all;
transition-property:all;
-webkit-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
-moz-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
-o-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
-webkit-transition-duration:200ms;
-moz-transition-duration:200ms;
-o-transition-duration:200ms;
transition-duration:200ms;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
transition-delay:0s
}
.bottom-inOutSpread:hover:after {
left:0%;
right:0%
}
.bottom-inOutSpread:not(:hover):after {
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
transition-delay:0s
}
原文：http://www.cnblogs.com/HONGYE1994/p/8012093.html