CSS 👉🏼 I don't know why ::before and ::after are included in the "box-sizing: border-box" reset

I know that box-sizing: border-box makes our lifes a lot easier. I've always just used the * selector, but:

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

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

Why *::before and *::after?

6 Replies

vinter.•6mo ago

because just * doesnt include the before and after pseudoelements

Pedro GarcíaOP•6mo ago

Fine! Those pseudoelements are used to place content before or after the elements, right?

vinter.•6mo ago

Well, its a bit more complex than that but Generally speaking they allow you to create and style a first and last child of the element they're referring to

ἔρως•6mo ago

the ::before and ::after are extra optional elements that aren't real the * refers to all tags https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors well, the correct term is "elements" pseudo-elements aren't elements: they don't exist but they also do exist

Pedro GarcíaOP•6mo ago

Fantastic, thank you guys so much ♥️🙏

ἔρως•6mo ago

you're welcome

Gaming

Programming

CSS 👉🏼 I don't know why *::before and *::after are included in the "box-sizing: border-box" reset

Did you find this page helpful?

CSS 👉🏼 I don't know why ::before and ::after are included in the "box-sizing: border-box" reset