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

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