该文章展示了如何利用CSS的线性渐变和:hover伪类创建一个效果，当鼠标悬停在文本上时，文本底部会从右侧向左侧显示出渐变线条。通过调整背景位置和大小，实现了动画过渡效果。
玩转CSS，实现鼠标hover文字文字底部出现渐变线条，效果如下
屏幕录制2023-03-23 21.31.18
利用渐变来实现
<style>
.title span{
background: linear-gradient( to right,#ec695c,#61c454) no-repeat right bottom;
background-size: 0 2px;
transition: background-size 1300ms;
}
.title span:hover{
cursor: pointer;
background-position-x: left;
background-size: 100% 2px;
}
</style>
<body>
<h2 class="title">
<span>
我不认为我会葬身于此，并且我从来没有如此神清气爽，
我仿佛看到重生，因为从今以后我海波东将不受束缚
</span>
</h2>
</body>
扫一扫
1141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
