鼠标放上去,会出现延展的线 ,而且是渐变的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .aaa { width:100px; height:60px; line-height: 100px; text-align: center; color:red; background-color: lightblue; position: relative; display:block; } .aaa:after { content:""; position:absolute; width:3px; height:3px; left:0; bottom:-42px; z-index:8888; transition:all 1s ease; background-color: red; background-color: transparent; } .aaa:hover:after { width:100%; background:#FCA311; transition:all 1s ease; } </style> </head> <body> <a class="aaa" href="">654654654654</a> </body> </html>
用心努力学习才会有收获
既然选择远方,便只顾风雨兼程