如何在 ::before 容器中使用 ::after div？

Question

情况如下：

我正在使用以下 CSS 使封面图像变暗，因此我可以在上面写一个标题。但是，在 ::before 容器中使用时，按钮样式不适用。

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

现在我想按如下方式添加我的按钮：

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

遗憾的是，该按钮没有以正确的格式显示。它只是保持白色，而不是预期的风格。每当我将按钮插入到 ::before div 之外时，它都会起作用。所以我想知道，我该如何处理这种情况，有没有办法可以同时使用两个伪元素？

Answer 1

对不起，我没有看你的代码，我的眼睛被你的 ::after 的 z-index -1 抓住了，可能是问题吗？