腾讯云·社区
Css制作hover下划线动画
.demo {
position: relative;
font-size: 20px;
display: inline-block;
cursor: pointer;
}
.demo:before {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 0;
height: 2px;
background: #4285f4;
transition: all .3s;
}
.demo:hover:before {
width: 100%;
left: 0;
right: 0;
}<div class="demo">自己实现的hover效果</div>
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句