:: after и :: before псевдоклассы, блокирующие теги привязки

  .log__signLi a {
    display: inline-block;
    z-index: 10;
}

.log__signLi {
    margin-bottom: 1.6rem;
}

.log__sign {
    position: relative;
    transition: all .4s;
    display: inline-block;
    margin-bottom: 2rem;
    border: 0px solid transparent;
}

.log__sign:hover {
    background-color: rgb(250, 250, 250);
    border-radius: 1rem;

    z-index: 0;
}

.log__sign:hover::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    display: inline-block;
    margin-bottom: 2rem;

    animation-name: log__signBottomLeft;
    animation-timing-function: ease-in-out;
    animation-duration: .6s;

    border-bottom: green 2.3px solid;
    border-left: green 2.3px solid;
    border-radius: 1rem;

    z-index: -99;
}

.log__sign:hover::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    display: inline-block;
    margin-bottom: 2rem;

    animation-name: log__signTopRight;
    animation-timing-function: ease-in-out;
    animation-duration: .6s;

    border-top: green 2.3px solid;
    border-right: green 2.3px solid;
    border-radius: 1rem;

    z-index: -99;
}

<nav class = "navbar">
        <ul class = "navbar__ul">
            <span class = "left">
                <li class = "navbar__li"> <a href = "#"> Coffee </a>  </li>
                <li class = "navbar__li"> <a href = "#"> Tea </a>  </li>
                <li class = "navbar__li"> <a href = "#"> Menu </a>  </li>
                <li class = "navbar__li"> <a href = "#"> Recipes  </a>  </li>
            </span>

            <div class = "logo__box">
                <a href = "index.html"> <img class = "logo" src = "https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png"> </a>
            </div>

            <span class = "right">
                <li class = "navbar__li"> <a href = "#"> Blog </a>  </li>
                <li class = "navbar__li"> <a href = "#"> Gift Cards </a>  </li>
                <li class = "navbar__li"> <a href = "#"> Reviews </a>  </li>

                <span class = "log__sign">
                    <li class = "navbar__li log__signLi"> <a href = "#" class = "log__signBtn"> Login </a> </li>
                    <li class = "navbar__li log__signLi"> <a href = "#" class = "log__signBtn"> Sign Up </a> </li>
                </span>
            </span>
        </ul>
    </nav>