最开始的时候了解
下划线
的属性是：text-decoration:underline;但是，很遗憾的是，对于设计做的
下划线
用浏览器默认属性样式很难调整，使用这个属性并不能调整
下划线
与
文字
的间距，而且对于
下划线
的颜色也不好调整，而使用<u></u>这个标签也是同样的效果。例子：<!DOCTYPE
html
>
<meta charset="UTF-8">
但是没法调整
下划线
和
文字
的间距，太贴
文字
了也不好看
2、于是就有了第二种方法：边框法，就是利用元素的下边框实现
下划线
的效果，还可以通过line-height调节距离
语法：linear-gradient(direction, color-stop 1, color-stop 2,……）
简单用法：background-image: linear-gradient(red, transparent);
增加角度，linear-gradient(45deg, red, transparent)
加个position：linear-gradient(45deg...
但是，很遗憾的是，对于设计做的
下划线
用浏览器默认属性样式很难调整，使用这个属性并不能调整
下划线
与
文字
的间距，而且对于
下划线
的颜色也不好调整，而使用<u></u>这个标签也是同样的效果。
<!DOCTYPE
html
>
很高兴为您解答问题。要实现这种效果，您可以使用
CSS
伪类:hover选择器来改变
文字
样式，然后使用
CSS
动画属性transition或者animation来为
下划线
添加
动画效果。具体实现细节可参考以下代码：
text-decoration: none; /* 去掉默认
下划线
*/
position: relative; /* 用于定位
下划线
*/
a::after {
content: ""; /*
添加
下划线
*/
position: absolute; /* 绝对定位 */
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #000;
transform: scaleX(0); /* 初始状态下
下划线
宽度为0 */
transition: transform 0.3s ease-in-out; /*
添加
变换效果 */
a:hover::after {
transform: scaleX(1); /* 鼠标悬浮时
下划线
宽度变为100% */
希望以上回答对您有所帮助。
