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

Question

情况如下：

我正在使用下面的 CSS 来加深一个 cover-image，所以我可以在上面写一个标题。然而，button-style 在 ::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 之外插入按钮时，它都会起作用。所以我想知道，我该如何处理这种情况，有没有办法可以同时使用这两个 pseudo-elements？

Answer 1

抱歉，我没有阅读您的代码，我的眼睛被您的 ::after 的 z-index -1 吸引住了，这可能是问题所在吗？

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

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

html

css

web

css-selectors

pseudo-element

HTML

CSS

HTML

CSS