版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Zhooson/article/details/81030399
- 动画的预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
<style type="text/css">
#line {
width: 500px;
height: 50px;
background: gray;
margin: 20px auto;
position: relative;
}
#line:after {
content: "";
width: 0;
height: 3px;
background: red;
position: absolute;
top: 100%;
left: 50%;
transition: all .5s;
}
#line:hover:after {
left: 0%;
width: 100%;
}
</style>
</head>
<body>
<div id="line"></div>
</body>
</html>