一、效果
二、代码
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯CSS下划线出现动画</title>
<style>
body{
background-color: #f0f0f0;
}
p span {
/* 背景不重复 */
background-repeat: no-repeat;
/* 设置（背景图片）高度和宽度。（宽度，高度）*/
background-size: 0 1px;
/* 设置背景图像的起始位置。 x, y*/
/* 控制线开始位置 */
/* 背景的开始位置 */
/* 0% 100% 从左到右 */
/* 100% 100% 从右到左*/
background-position: 50% 100%; /* 表示从中间开始向两边 */
/* 动画效果 all-全部变化，可以为background 4s-动画时间 ease-in-out-动画效果：慢快慢*/
transition: all .4s ease-in-out;
/* linear-gradient 渐变效果*/
/* to right 从右侧开始渐变*/
/* to bottom right 从左上角到右下角的线性渐变: */
background-image: linear-gradient(to right, #888888, #878787, #888888);
}
p span:hover {
background-size: 100% 1px;
}
</style>
</head>
<body>
<p><span>设置（背景图片）高度和宽度。第一个值设置宽度，第二个值设置的高度</span></p>
<p><span>设置（背景图片）高度和宽度。</span></p>
<p><span>设置（背景图片）高度和宽度。第一个值设置宽度，</span></p>
</body>
</html>
