::after and ::before pseudo classes blocking anchor tags

Question

So in my code, I have an area that has two anchor tags in it. To make the area look nice, I made two new ::before and ::after pseudo-selectors of it which would make an animation occur after hovering over the area. Anyways, after I did that, the anchor tags were completely inaccessible. I know that it has something to do with the before and after pseudo classes because once I comment them out, the anchor tags are once again accessible. I have tried z-index but still. Here is the code:

CSS

.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: 0;
}

.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: 0;
}

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

Answer 1

Just add pointer-events: none to your ::before and ::after pseudo-elements and then your links will become accessible.

By the way, your way of defining a ::before and ::after is wrong, you should define them first, and then style them on ::hover state; but the first trick should solve your problem easily.

let me know if it'd work or not.

Answer 2

I was able to get your links working by changing the z-index of your hover effects from 0 to -99.

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