html - 在 css::after 之后放置一个 div

Question

我有一个显示 SVG 图像的 CSS ::after。
我希望我的容器在该 SVG 图像之后显示。
正在发生的事情是，SVG 可以说“不占用任何空间”，下一个 DIV 被 SVG 覆盖。

感谢您对此进行调查。

.overpass-info-container::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 0;
  height: 182px;
  width: 100%;
  background-color: white;
  background: url("../images/curve.svg") bottom center;
  background-size: 100%;
  outline: 1px solid red;
}

/*  finding container  */
section.finding-container {
  top: 180px;
  display: flex;
  position: absolute;
}

.find-agent {
  margin-left: auto;
  display: flex;
  flex-flow: column;
}

.agent-profiles {
  display: flex;
  flex-flow: column;
}

<!-- ***** finding container ***** -->
<section class="finding-container">
  <div class="find-agent">
    <img src="./images/search.svg" alt="search">
  </div>
  <div class="agent-profiles">
    <img src="./images/profiles.svg" alt="profiles">
  </div>
</section>

Answer 1

在 .overpass-info-container::after 中

• 尝试添加一个display: block
• 尝试将 position: absolute 替换为 position: relative

这些更改应该在 HTML 中为 ::after 提供他自己的空间。