本特效,将鼠标移到超链接上时,超链接下方有一个动态伸长的下划线(颜色、大小、位置均可指定)。
<!DOCTYPE html> <html> <head> <style type="text/css"> .nav li a { display:inline-block; position:relative; line-height:30px; } .nav li a::after { content:''; position:absolute; bottom:0; left:10%; border-radius:2px; width:80%; height:2px; background:#000; transform:scaleX(0); transition:0.3s; } .nav li a:hover::after { transform:scaleX(1); } .nav li.cur a::after { transform:scaleX(1); } .nav li.cur a:hover::after { transform:scaleX(0.5); } </style> </head> <body> <ul class="nav"> <li><a href="http://www.itpow.com/">itpow</a></li> <li><a href="http://www.itpow.com/">itpow</a></li> <li class="cur"><a href="http://www.itpow.com/">itpow</a></li> </ul> </body> </html>