Le sélecteur universel et les pseudo-éléments

Le sélecteur universel (*) cible tous les éléments d'un document. Cependant, cela n'affecte pas directement les pseudo-éléments comme :before et :after.

Les pseudo-éléments sont des abstractions du DOM qui représentent des nœuds virtuels. Ce ne sont pas des éléments réels et ne peuvent donc pas être ciblés par de simples sélecteurs comme *.

Pour appliquer des styles aux pseudo-éléments, vous devez les inclure explicitement dans le sélecteur, par exemple, ,  : before, *:after.

Cela signifie que la déclaration * { box-sizing: border-box; } n'affecte pas automatiquement les pseudo-éléments comme :before et :after.

Au lieu de cela, vous devez déclarer :before, :after { box-sizing: border-box; } pour appliquer la propriété box-sizing à ces pseudo-éléments.

Certains développeurs peuvent utiliser simplement * { box-sizing: border-box; } et ne rencontrez jamais de problèmes car les pseudo-éléments sont généralement affichés en ligne. La taille de la boîte n'affecte pas les éléments en ligne, donc l'utilisation du sélecteur universel seul n'aura pas d'impact notable sur les pseudo-éléments.

Il est important de noter que même si :before, :after affecte les pseudo-éléments. de tous les éléments, y compris html, head et body, ces pseudo-éléments ne seront pas générés tant que vous n'aurez pas appliqué la propriété content. Il n'y a aucun problème de performances associé à ce comportement.