使用 CSS 实现动态下划线特效-qaq卟言的个人博客

【使用 CSS 实现动态下划线特效】

qaq卟言2020-07-21 00:32:35 Css Html

开始

a标签下划线默认有下划线的
1.png
太丑了我不喜欢，所以为了美观，我需要去掉下划线，让网页更加美观
但是没有下划线只能看浏览器左下角显示有没有链接
这样子对于用户体验不是特别好
可以使用css伪元素来实现下划线，使用transform中的scale来缩放伪元素，用transform-origin来控制缩放
效果
2.png

.qaqgzsljxh{
position: relative;
color: #FF6666;
}
.qaqgzsljxh::after{
content: '';
width: 100%;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background-color: currentColor;
transform: scale(0);
transition:all .3s;
}
.qaqgzsljxh:hover::after{
transform: scale(1);
transform-origin: center;
}

完结

🔖本文来源：qaq卟言的个人博客网站声明如损害你的权益请联系我们

📜著作协议：《知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议》

⚠️部分文章图片来自网络，可能存在版权问题。如发现相关争议请联系qaq卟言处理！

🔗

⏲

国庆节过后的旅行
上一篇

网站变成灰色css代码
下一篇

随机文章

该文章已经关闭评论,评论请前往留言信箱