元素出现在 DOM 中其余内容之前的绝对定位伪元素之后

Question

我最近发现将伪元素用作设计目的的图形元素。我正在尝试在 div 上使用 ::after 元素在部分之间创建水平 div iders，如下：

.banner {
     position: relative;
     width: 100%;
     overflow: hidden;

}
 .banner__text, .banner__logo {
     width: 50%;
     float: left;
}
 .banner::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     border-bottom: 1px solid purple;
}

<div class="app">
  <div class="banner">
    <div class="banner__text">
      <h3>Hello World</h3>
      <p>longer string here</p>
    </div>
    <div class="banner__logo">
      <img src="//unsplash.it/159/250" />
    </div>
  </div>

  <div class="banner">
    <div class="banner__text">
      <h3>Hello World</h3>
      <p>longer string here</p>
    </div>
    <div class="banner__logo">
      <img src="//unsplash.it/159/250" />
    </div>
  </div>

 <div class="banner">
   <div class="banner__text">
     <h3>Hello World</h3>
     <p>longer string here</p>
   </div>
   <div class="banner__logo">
     <img src="//unsplash.it/159/250" />
   </div>
  </div>

</div>

但是，您会注意到所有 ::after 元素都堆叠在顶部；有没有办法让这些绝对定位的元素 相对定位 parents 来 after 每个 div.banner?

注意：这个问题的答案太具体了我无法确定解决方案，虽然它在范围上相似...

更新

将 overflow: hidden 添加到 .banner 修复了 after 元素堆叠在顶部，但它们仍然出现在 before 每个 div.banner，虽然我想要它们 after.

Answer 1

添加 bottom: 0 使分隔符出现在每个 .banner 的底部。但是，为简单起见，您可能希望为此使用底部边框而不是 ::after 伪元素。并非所有事情都需要一个人完成。话虽如此，但实验并没有错。

元素出现在 DOM 中其余内容之前的绝对定位伪元素之后

Absolutely positioned pseudo after element is appearing before the rest of the content in the DOM

html

css

pseudo-element