css 一个文字悬停下划线效果?-灵析社区

世界唯一的

效果网址 : [https://dzone.com](https://link.segmentfault.com/?enc=3g3lLSRjWTzO1SOt1zsfSw%3D%3D.0z5xB9RgANEnCmuYtf2ggSrh8fLXNsNSpYCsrZor08k%3D) ![SDGIF_Rusult_1.gif](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241008/1317fc236c223add1c7a7e08e2646b3e.png) 我看了一下, 这个效果感觉挺简单的, 但是自己试了以下感觉还是挺难的 他们网页用到了 `js`, 不过我是用 `css` 实现的 我参照着自己做的代码如下 这是一段测试文字 span { display: inline-block; } span { transition: 3s; background: linear-gradient(0deg, black, black) no-repeat right bottom / 0 2px; background-size: 0 1px; } span:hover { background-position-x: left; background-size: 100% 1px; } 但是效果还有有些诧异, 为了更好看出效果我把过渡时间调整3秒 ![SDGIF_Rusult_1.gif](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241008/8c1192adfadccfd5b3229361df7812d4.png) 有没有大佬有好一点的实现方案? 用css或者js都可以

阅读量：207

点赞量：0

问AI
xiahuaxian .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; } 文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果，文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果，文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果，文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果。