CODEWITHSUNDEEP
cssflexboxpseudo-class
user9011377
user9011377

Reputation:

Do flexboxes generate :before and :after?

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"?

Upvotes: 1

Views: 438

Answers (2)

Mr Lister
Mr Lister

Reputation: 46589

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.

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371679

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

Upvotes: 0

Related Questions