hover 标题下划线效果 *{ margin: 0; padding: 0; } #line{ margin: 200px; width: 220px; line-height: 2; } #l...
效果截图：
代码：
<!DOCTYPE html>
<html>
<head>
<!-- hover 标题下划线 -->
<meta charset="utf-8">
<title>hover 标题下划线效果</title>
<style>
*{
margin: 0;
padding: 0;
}
#line{
margin: 200px;
width: 220px;
line-height: 2;
}
#line p{
display: inline;
cursor: pointer;
font-size: 24px;
padding-bottom: 5px;
background: linear-gradient(to right,#e0c3fc 0%, #8ec5fc 100%) no-repeat right bottom;
background-size: 0 4px;
transition: background-size 1300ms;
}
#line p:hover{
background-position-x: left;
background-size: 100% 4px;
}
</style>
</head>
<body>
<div id="line">
<p>这是一段文字用来制作下划线动画</p>
</div>
</body>
</html>
