我的 CSS 代码没有运行，请检查

Question

body{
    margin:0;
    padding:0;
    background-color:#f1ff36;
    font-family:verdana;
}

.center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

a{
    position:relative;
    text-decoration:none;
    border:2px solid transparent;
    width:100px;
    height:50px;
    text-align:center;
    line-height:50px;
    display:inline-block;
    font-size:24px;
    color:#262626;
}

a:before{
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    width:0;
    height:0;
    background:transparent;
    border:2px solid transparent;
}

a:hover:before{
    animation:animate 1s linear forwards;
}

@keyframes animate{
    0%{
        width:0;
        height:0;
        border-top-color:#262626;
        border-right-color:transparent;
        border-bottom-color:transparent;
        border-left-color:transparent;

    }
    50%{
        width:100%;
        height:0;
        border-top-color:#262626;
        border-right-color:#262626;
        border-bottom-color:transparent;
        border-left-color:transparent;

    }
    100%{
        width:100%;
        height:100%;
        border-top-color:#262626;
        border-right-color:#262626;
        border-bottom-color:transparent;
        border-left-color:transparent;

    }
}

a:hover:after{
    animation:animate2 1s linear forwards;
    animation-delay:1s;
}

@keyframes animate2{
    0%{
        width:0;
        height:0;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:transparent;
        border-left-color:#262626;

    }
    50%{
        width:0;
        height:100%;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:#262626;
        border-left-color:#262626;

    }
    100%{
        width:100%;
        height:100%;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:#262626;
        border-left-color:#262626;

    }
}

animate2 根本不起作用告诉我这段代码中发生的错误。

在这段代码中，您可以看到有两个动画，第一个动画工作正常，但第二个动画，即animate2 根本不工作。告诉我我在什么时候犯了错误，我真的很困惑和沮丧，尝试运行这段代码但无济于事。

Answer 1

我想你忘了添加空内容块 a:after 看看这个codepen

a:before, a:after {