- 下划线从左到右效果
<!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> <style> a,a:link,a:visited,a:focus{ text-decoration:none;color:#000; } .right-to-left{ position:relative; } .right-to-left::after{ content:''; display:block; width:0; height:3px; position:absolute; right:0; /*区别就是开始时在右边*/ bottom:-10px; background:#000; transition:all 0.3s ease-in-out; } .right-to-left:hover::after{ width:100%; } </style> </head> <body> <a href="#" class="right-to-left">鼠标经过从右向左延伸的下划线</a> </body> </html>
- 下划线从中间向两端延伸效果
<!DOCTYPE> <html> <head> <meta charset="utf-8"/> <title>下划线动画</title> <style> a,a:link,a:visited,a:focus{ text-decoration:none;color:#000; } .center-to-head{ position:relative; } .center-to-head::after{ content:''; display:block; /*开始时候下划线的宽度为100%*/ width:100%; height:3px; position:absolute; bottom:-10px; background:#000; transition:all 0.3s ease-in-out; /*通过transform的缩放scale来让初始时x轴为0*/ transform: scale3d(0,1,1); /*将坐标原点移到元素的中间，以原点为中心进行缩放*/ transform-origin:50% 0; } .center-to-head:hover::after{ /*鼠标经过时还原到正常比例*/ transform:scale3d(1,1,1); } </style> </head> <body> <a href="#" class="center-to-head">鼠标经过从中间向两端延伸的下划线</a> </body> </html>