What does the CSS pseudo selector :after do other than set content?

Question

Can someone explain what this code from Bootstrap is doing?

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

I understand the box-sizing part.

I think I understand *:after. However I am familiar with this usage:

*:after {
  content: 'hello world'
}

In the case without a content property what is this doing? Is it saying "all elements inserted with :after should also have box-sizing 'border-box'" - or something else?

Create a pseudo element (size, color, format, etc...). The box-sizing in this case is to prevent pseudo elements don´t exceed the size even if there is a padding. — Luís P. A., May 20 '16 at 16:30
I believe what OP is confused by is why isn't `*` good enough to cover everything. — zer00ne, May 20 '16 at 17:10

score 0 · Answer 1 · answered May 20 '16 at 16:41

    *:before,
    *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }

This part describes anything I mean any tag or class or ID has :before or :after after that will have the box-sizing property of border box.

Like , if any div has a pseudo element and it has a border property then it's box-sizing property will automatically be border-box unless you override the property like this :

div:before{
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box; 
}

What does the CSS pseudo selector :after do other than set content?

1 Answers1