How do I use a ::after div within a ::before container? - html

Question

Here is the situation:
I am using the following CSS to darken a cover-image, so I can write a headline on it. The button-style however doesn't apply when using it within the ::before container.
HTML
<main class="zimmer-cover-dark">
<div class="zimmer-cover-inside">
...
</div>
</main>
CSS
.zimmer-cover-dark {
position: relative;
height: 65em;
}
.zimmer-cover-dark::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(resources/img/7.jpeg);
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: brightness(35%);
}
.zimmer-cover-inside {
position: relative;
padding-top: 18em;
}
Now I want to add my button as follows:
HTML
<main class="zimmer-cover-dark">
<div class="zimmer-cover-inside">
<a href="">
<button type="button" class="custom-btn-open">
Book Now
</button>
</a>
</div>
</main>
CSS
button {
font-weight: 400;
border: solid 2px #585858;
outline: 0;
padding: 1rem 4rem;
font-size: 1.25rem;
letter-spacing: 0.00rem;
background-color: white;
border-radius: 0.35rem;
position: relative;
cursor: pointer;
}
button::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #a9c7b1;
z-index: -1;
border-radius: 0.35rem;
border: solid 2px #919191;
transition: all 0.3s ease-in-out;
}
button.custom-btn-open::after {
top: 0.5rem;
left: 0.5rem;
}
The button sadly doesn't appear in the right format. It just stays white and not the intended style. Whenever I insert the button outside a ::before div, it works. So I wonder, how to I approach this situation, and is there a way I can use both pseudo-elements together?

Answer 1

sorry i did not read your code, my eyes got catch by the z-index -1 of your ::after, may it be the problem?