Pure CSS underline appears animated

1. Effect
2. Code
<!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>
Pure CSS underline appears animated

Guess you like
