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

最新推荐文章于 2019-08-29 16:53:23 发布

weixin_30600503

最新推荐文章于 2019-08-29 16:53:23 发布

阅读量182

点赞数

原文链接：http://www.cnblogs.com/agansj/p/8388255.html

版权

<!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>