O seletor universal e os pseudoelementos

O seletor universal (*) tem como alvo todos os elementos de um documento. No entanto, isso não afeta pseudoelementos como :before e :after diretamente.

Pseudoelementos são abstrações do DOM que representam nós virtuais. Eles não são elementos reais e, portanto, não podem ser direcionados por seletores simples como *.

Para aplicar estilos a pseudoelementos, você precisa incluí-los explicitamente no seletor, por exemplo, , : antes, *:depois.

Isso significa que a declaração * { box-sizing: border-box; } não afeta automaticamente pseudoelementos como :before e :after.

Em vez disso, você precisa declarar :before, :after { box-sizing: border-box; } para aplicar a propriedade box-sizing a esses pseudoelementos.

Alguns desenvolvedores podem usar apenas * { box-sizing: border-box; } e nunca encontrará problemas porque os pseudoelementos normalmente são exibidos in-line. O dimensionamento da caixa não afeta os elementos embutidos, portanto, usar o seletor universal sozinho não afetará visivelmente os pseudoelementos.

É importante observar que enquanto :before, :after afeta os pseudoelementos de todos os elementos, incluindo html, head e body, esses pseudoelementos não serão gerados até que você aplique a propriedade content. Não há preocupações de desempenho associadas a esse comportamento.