Got confused for this code" *::after { box-sizing: border-box;"

I’m trying to build a survey form. And when i read the source code for the case, i got confused.

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

Could someone explain the usage of this code? And how it works?

Rather then explaining use this:
https://www.w3schools.com/cssref/sel_before.asp
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

1 Like

Thank you for your help. I know the usage for"::after" and “box-sizing”. I just confused how they combine.

So what that is saying is “apply box-sizing:border-box to every element (*), and to every pseudo-element, ie elements created only in CSS, (*::before and *::after)”.

If you were to just do

* {
  box-sizing: border-box;
}

It wouldn’t apply to the pseudo-elements. And there is no way to say “select all pseudo-elements, regardless of what they are”, you need to specify each type

1 Like

Thank you very much for your answer!It help me a lot! Thanks again.:pray:

1 Like