下划线特效

最新推荐文章于 2023-10-17 10:34:36 发布

郭豪杨

最新推荐文章于 2023-10-17 10:34:36 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42603150/article/details/81083209

版权

下划线从左到右效果

<!DOCTYPE> <html> <head> <meta charset="utf-8"/> <title>下划线动画</title> <style> /*先把a的原有下划线样式给清除*/ a,a:link,a:visited,a:focus{ text-decoration:none;color:#000; } /*设置a的定位，给我们自己编写的下划线一个定位参考*/ .left-to-right{ position:relative; } /*使用伪类给a下面添加下划线*/ /*css3为了区别伪类选择器把::改为:,使用:也会自动转为::*/ .left-to-right::after{ content:''; display:block; /*开始时候下划线的宽度为0*/ width:0; height:3px; position:absolute; left:0; bottom:-10px; background:#000; /*这里我们设定所有改变都有动画效果，可以自己指定样式才有动画效果*/ transition:all 0.3s ease-in-out; } .left-to-right:hover::after{ width:100%; } </style> </head> <body> <a href="#" class="left-to-right">鼠标经过从左向右延伸的下划线</a> </body> </html>

下划线从右到左效果

<!DOCTYPE> <html> <head> <meta charset="utf-8"/> <title>下划线动画</title> <styl

最低0.47元/天解锁文章

郭豪杨

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
下划线特效

下划线从左到右效果 &lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;下划线动画&lt;/title&gt; &lt;style&gt; /*先把a的原有下划线样式给清除*/ a,a:link,a:visited,a:focus{ text-decor
复制链接

扫一扫