CSS动画下划线

前言：

        在项目开发中，难免会遇到一些特别的需求，就比如具体要将的动态下划线，如何实现的呢？今天就来学习一下。

        首先要明白一个道理，下划线用什么，用border可以吗，这显然是不行的，因为border无法去控制一个宽度，那用什么可以呢？

实现动态下划线的方法

        使用背景渐变（background-image）结合线性渐变（linear-gradient）可以灵活控制下划线的宽度、颜色和动态效果。以下是具体实现方案：

html结构：

    <h2 class="text"><span>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。<br></span></h2>

CSS实现：

.text{line-height: 2;
}
.text span {background-image: linear-gradient(to right, #000, #000);background-repeat: no-repeat;background-size: 0 2px;background-position: bottom right;transition:background-size 1s;
}
.text:hover span{background-size: 100% 2px;background-position: left bottom;
}