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

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?