The Universal Selector and Pseudo-Elements

The universal selector (*) targets all elements in a document. However, it does not affect pseudo-elements like :before and :after directly.

Pseudo-elements are abstractions of the DOM that represent virtual nodes. They are not actual elements and therefore cannot be targeted by simple selectors like *.

To apply styles to pseudo-elements, you need to explicitly include them in the selector, e.g., , :before, *:after.

This means that the declaration * { box-sizing: border-box; } does not automatically affect pseudo-elements like :before and :after.

Instead, you need to declare :before, :after { box-sizing: border-box; } to apply the box-sizing property to those pseudo-elements.

Some developers may use just * { box-sizing: border-box; } and never encounter issues because pseudo-elements are typically displayed inline. Box-sizing does not affect inline elements, so using the universal selector alone will not noticeably impact pseudo-elements.

It's important to note that while :before, :after affects pseudo-elements of all elements, including html, head, and body, those pseudo-elements will not be generated until you apply the content property. There are no performance concerns associated with this behavior.