自定义超链接动画---transition

效果图：

<a href="#">
    <span>HTML</span>
</a>

a {
            position: relative;
            text-decoration: none;
            display: block;
            text-align: center;
            width: 200px;
        }

        /* 绘制上下线条 */
        a::before,
        a::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            transition: width .2s ease-in-out;
            background: #92B901;
        }

        /* 固定线条方向 */
        a::before{
            top:;
            left:;
        }
        a::after{
            bottom:;
            right:;
        }

        /* 过滤效果 */
        a:hover::before,
        a:hover::after{
            width:;
        }

        a span{
            display: block;
            padding: 20px;
        }

        /* 绘制左右线条 */
        a span::before,
        a span::after{
            content: "";
            position: absolute;
            width: 2px;
            height: 100%;
            transition: height .2s ease;
            background: #92B901;
        }
        a span::before{
            bottom:;
            left:;
        }
        a span::after{
            top:;
            right:;
        }
        a span:hover::before,
        a span:hover::after{
            height:;
        }