css实现动态下划线
看到这个效果想了好久,最后决定用背景颜色的形式去实现。
# 代码如下
<h2 class="title">
<span>一个在脱发路上奋斗的小菜鸡</span>
</h2>
<style>
.title {
color: #000;
line-height: 10px;
}
.title span {
background: linear-gradient(to right, #61c, #ee0a24) no-repeat right bottom;
background-size: 0 1px;
transition: background-size 0.3s;
}
span:hover {
background-position-x: left;
background-size: 100% 1px;
}
</style>