El selector universal y pseudoelementos

El selector universal (*) apunta a todos los elementos de un documento. Sin embargo, no afecta a los pseudoelementos como :before y :after directamente.

Los pseudoelementos son abstracciones del DOM que representan nodos virtuales. No son elementos reales y, por lo tanto, no pueden ser seleccionados por selectores simples como *.

Para aplicar estilos a pseudoelementos, debe incluirlos explícitamente en el selector, por ejemplo, , : antes, *:después.

Esto significa que la declaración * { box-sizing: border-box; } no afecta automáticamente a pseudoelementos como :before y :after.

En su lugar, debe declarar :before, :after { box-sizing: border-box; } para aplicar la propiedad box-sizing a esos pseudoelementos.

Algunos desarrolladores pueden usar simplemente * { box-sizing: border-box; } y nunca encontrará problemas porque los pseudoelementos generalmente se muestran en línea. El tamaño del cuadro no afecta los elementos en línea, por lo que usar el selector universal por sí solo no afectará notablemente a los pseudoelementos.

Es importante tener en cuenta que mientras :antes, :después afecta a los pseudoelementos de todos los elementos, incluidos html, head y body, esos pseudoelementos no se generarán hasta que aplique la propiedad de contenido. No hay problemas de rendimiento asociados con este comportamiento.