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

Question

I've recently discovered the use of pseudo elements as graphical elements for design purposes. I'm trying to use a ::after element on a div to create horizontal dividers between sections, below:

.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>

However, you will notice that all the ::after elements stack right up at the top; is there a way I can have these absolutely positioned elements that have relatively positioned parents come after each div.banner?

Note: this question ::after pseudo element appearing before has such a specific answer I cannot determine the solution, although it is similar in scope...

UPDATE

Adding overflow: hidden to .banner fixes the after elements stacking up at the top, but they still appear before the rest of the content in each div.banner, while I'd like them after.

@TemaniAfif I edited the question, as you can see the issue still persists — warren wiser, Jul 23 '21 at 23:35
I disagree, my question had a specific problem which needed to be solved, while that answer seems to go over the theory of what clearfix is and why/when to use it. I'd argue that it is a _related_ question as, while clearfix is _a_ solution to my problem, my question itself duplicated nothing. — warren wiser, Jul 24 '21 at 03:36

score 1 · Accepted Answer · answered Jul 26 '21 at 13:22

Add bottom: 0 to make the dividers appear at the bottom of each .banner. For simplicity you'll probably want to use a bottom border instead of an ::after pseudo-element for this, however. Not everything needs to be done with one. Having said that, there is nothing wrong with experimenting.

warren wiser · Answer 2 · 2021-07-24T03:41:43.297

0

The solution here is to add overflow: hidden; to div.banner, per @Temani Afif's comment.

Codepen here

EDIT

Additional Reading

See this question for a detailed description of why this failed, what clearfix is, and how this is conventionally solved.

edited Jul 24 '21 at 03:41

answered Jul 23 '21 at 23:53

warren wiser

57
2
10

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

2 Answers2

EDIT

Additional Reading