I. L'explication courte▲
En dehors de la compatibilité du navigateur, il n'y a aucune différence entre :before et ::before, ni entre :after et ::after.
II. L'explication longue▲
La syntaxe deux-points simples (c'est à dire ":before" ou ":after") est la syntaxe utilisée à la fois pour les pseudo-sélecteurs et les pseudo-classes dans toutes les versions CSS avant la version CSS3. Avec l'introduction du CSS3, dans le but de faire une différenciation entre les pseudo-classes et les pseudo-éléments (oui, il y en a une), tous les pseudo-éléments doivent utiliser la syntaxe deux-points doublé ("::") et toutes les pseudo-classes doivent utiliser la syntaxe de deux-points simples (":").
La spécification dit ceci :
La notation de deux-points doublé est introduite ... dans le but d'établir une discrimination entre les pseudo-éléments et les pseudo-classes. Pour maintenir une compatibilité avec les styles existants, les navigateurs devront également accepter la précédente syntaxe de simple deux-points pour les pseudo-éléments introduits dans CSS niveaux 1 et 2 (nommément, :first-line, :first-letter, :before and :after). Cette compatibilité n'est pas autorisée pour les nouveaux pseudo-éléments introduits en CSS niveau 3.
III. Un peu trop tard ?▲
Alors que je suis ravi par les améliorations bénéfiques apportées par la spécification, il me semble malgré tout que ce changement vient trop tard. Il y a des centaines de millions de pages internet dans la nature qui utilisent la syntaxe de deux-points simples pour les pseudo-éléments.
Comme annoncé dans l'extrait de la spécification, tous les navigateurs modernes doivent supporter l'ancienne syntaxe et cela pour l'éternité. Par exemple, si, dans dix ans, Firefox atteint une version 7, ils devront toujours supporter la syntaxe de simple deux-points afin d'éviter de "casser le web".
Alors pourquoi le faire ? Il semble que ce soit un peu trop tard. Oui les sites modernes (les plus récents) auront la nouvelle syntaxe, mais seulement si les développeurs sont au fait de ces changements - ce qui sera le cas pour seulement un faible pourcentage de développeurs.
Je suppose que cela servira à aider à différencier les deux types de sélecteurs pour faciliter la maintenance des feuilles de style.
IV. Remerciements▲
Un grand merci à Bovino pour sa relecture attentive et ses conseils.
Merci à Louis Lazaris pour ce tutoriel.