自定义超链接动画---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: 0;
            left: 0;
        }
        a::after{
            bottom: 0;
            right: 0;
        }
        
        /* 过滤效果 */
        a:hover::before,
        a:hover::after{
            width: 0;
        }
        
        
        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: 0;
            left: 0;
        }
        a span::after{
            top: 0;
            right: 0;
        }
        a span:hover::before,
        a span:hover::after{
            height: 0;
        }