css实现文字悬停下划线效果
要实现文字悬停后下划线从左往右变长的效果，我们使用css代码设置文本背景为渐变，并将过渡时间设为1秒。
代码如下：
.title { color: #333; line-height: 2; position: relative; display: inline-block;}.title span { background: linear-gradient(to right, #7e2f2b, #146420) no-repeat right bottom; background-size: 0% 2px; transition: background-size 1s ease;}.title:hover span { background: linear-gradient(to right, #7e2f2b, #146420) no-repeat left bottom; background-size: 100% 2px;}
在html文件中，将该代码应用到需要添加下划线的文本上：
话袋AI笔记
话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑
195 查看详情
立即学习“前端免费学习笔记（深入）”；
文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果。
这样，当鼠标悬停在文本上时，下划线就会从左往右变长，鼠标移出时又会变短。
以上就是如何用CSS实现文字悬停下划线从左往右变长的效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1157654.html
微信扫一扫 
支付宝扫一扫 
