将鼠标放到对应链接或者区块上,下方会出现从左到右的自动延长下划线。
<!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; 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>
效果展示:
鼠标经过从左向右延伸的下划线
1F
看起来还不错。