鼠标放上去，会出现延展的线，而且是渐变的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
           .aaa {
               100px;
               height:60px;
               line-height: 100px;
               text-align: center;
               color:red;
               background-color: lightblue;
               position: relative;
               display:block;
           }
           .aaa:after {
               content:"";
               position:absolute;
               3px;
               height:3px;
               left:0;
               bottom:-42px;
               z-index:8888;
               transition:all 1s ease;
               background-color: red;
               background-color: transparent;
           }
           .aaa:hover:after {
                100%;
                background:#FCA311;
                transition:all 1s ease;
           }


    </style>
</head>
<body>
    <a class="aaa" href="">654654654654</a>
</body>
</html>

鼠标放上去，会出现延展的线 ，而且是渐变的

鼠标放上去，会出现延展的线，而且是渐变的