在CSS ::after之后放置一个div

Question

我有一个CSS ::after，它显示一个SVG图像。
我希望我的容器在这个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>

- user8000626

---

请简要描述您的问题。 - Revti Shah

.overpass-info-container div在哪里？ - Revti Shah

@RevtiShah，这是曲线图像之前的div。 - user8000626

但是你没有在HTML中提到它。首先，你必须提到div。 - Revti Shah

那么为什么不在“.overpass-info-container”上添加margin-bottom: 182px;（svg高度），以留出底部的空间呢？我认为在这种情况下没有其他方法。此外，您的底部div也是position:absolute;，所以为什么期望它会留下空间呢？ - Hanif

Answer 1

在.overpass-info-container::after中：

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

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

- Shaul Vainblat

---

嗨@Shaul，感谢您关注此问题。然而，当我尝试应用您的建议时，来自.overpass-info-container :: after的SVG“消失了”... - user8000626

Answer 2

嗯，我做了一些简单的事情，仍然欢迎建议。 我为每个子元素添加了一个margin-top属性，这解决了问题...

section.finding-container {
  top: 180px;
  display: flex;
  position: absolute;
}
.find-agent {
  margin-top: 200px;
  margin-bottom: auto;
  margin-left: 0;
  display: inline-flex;
  flex-flow: column;
}
.agent-profiles {
  margin-top: 200px;
  display: inline-flex;
  flex-flow: column;
}

感谢所有尝试帮助的人...

- user8000626