Do flexboxes generate :before and :after?

Question

Curiosity question, can't find any answer on the net.

I use a lot of :before and :after in my CSS so I declared this at the beginning of my style sheet :

:before, :after {
   content: "";
}

This way, I don't have to declare content each time I need a pseudo-class.

But when I did that, my elements displayed with display: flex are exposed differently.

Example: they are centered whereas I declared justify-content: space-between

So I was wondering: do flexboxes generate their own pseudo-classes with content: "something"?

Your before and after are defined so they become children of your flex container which makes them flex items. — Huangism, Dec 14 '17 at 14:29

score 3 · Accepted Answer · edited Dec 14 '17 at 15:10

No, flexboxes do not generate their own pseudo-classes with content: "something". What happens here is simply the same as with all other ::before and ::after pseudo elements, namely that you are creating extra content. content: "" is not the same as content: none!

In this example, I give the children borders, so that you can see where they are. Without ::before and ::after:

section {
  display: flex;
  background: yellow;
  justify-content: space-between;
}
section div {
  border: 1px solid red;
}

<section>
 <div>one</div>
 <div>two</div>
</section>

And with ::before and ::after. So now you have two elements AND two pseudo elements, for a total of four pieces of content. The behaviour is completely as expected: those four bits are spread out evenly.

section {display:flex; background:yellow; justify-content:space-between}
section div {border:1px solid red;}
section::before, section::after {content:""; border:1px solid red;}

<section>
 <div>one</div>
 <div>two</div>
</section>

If that is undesired behaviour for flexboxes, simply reset the content property back to none for those elements.

score 1 · Answer 2 · answered Dec 14 '17 at 14:33

Across box models, pseudo elements become children of the container. So when you declare ::before / ::after on a flex container, those pseudo elements become flex items.

If you have two actual (DOM) elements in the container, with justify-content: space-between, and then add ::before and ::after elements, you now have four flex items. Those pseudos take the edge positions, forcing the DOM elements to spread across the container.

This is actually a method that can be use to spread flex items evenly in the container. Not space-between, not space-around, but space-evenly, which allots equal space on either side of all items.

Since space-evenly isn't widely supported yet, the pseudo-element hack is a solid workaround.

More details here: Equal space between flex items

Do flexboxes generate :before and :after?

2 Answers2