:before
et :after
ne sont pas obligés de fonctionner pour les éléments remplacés, et les spécifications CSS ne spécifient pas comment ils fonctionneraient pour eux, et le concept d'élément remplacé est quelque peu vague.
La spécification CSS 2.1 suggère clairement qu'ils peuvent fonctionner pour les éléments remplacés, en disant simplement qu'elle ne «définit pas complètement» comment. Cela concerne le problème selon lequel un élément remplacé doit avoir son propre rendu visuel, qui n'est pas contrôlé par CSS, alors que les pseudo-éléments devraient ajouter quelque chose au contenu de l'élément. La spécification ajoute que cela sera défini «plus en détail» dans une future spécification, mais cela n'a pas eu lieu jusqu'à présent.
Les fournisseurs de navigateurs ont simplement décidé d'éviter les problèmes en n'implémentant pas du tout ces pseudo-éléments pour certains éléments.
On ne sait pas du tout ce que signifie «élément remplacé», et le sens semble avoir quelque peu changé. Il est souvent interprété comme signifiant la même chose qu'un élément vide (un élément avec un EMPTY
contenu déclaré, c'est-à-dire un élément qui ne peut pas avoir de contenu), mais CSS 2.1 lui-même montre un exemple de feuille de style avec le sélecteur br:before
(bien que les navigateurs l'aient ignoré, implémentant br
leur propre façon). On peut affirmer que de plus en plus d'éléments sont passés dans le champ d'application du rendu CSS, au moins en partie. Par exemple, un input
élément (y compris sa police, ses couleurs, etc.) est largement contrôlable avec CSS dans les navigateurs modernes.
Les navigateurs actuels (Firefox, IE, Chrome) ne semblent pas soutenir les :after
et :before
pseudo-éléments pour les éléments vides autres que hr
. Pour hr
, IE et Chrome placent le contenu généré dans une zone encadrée, qui est la mise en œuvre de hr
; le contenu rend la boîte plus haute. Firefox place le contenu des deux (!) Pseudo-éléments après la règle horizontale qui est son implémentation hr
. Cette variation illustre les types de problèmes d '«interaction» auxquels se réfère CSS 2.1.
On prétend souvent que ces pseudo-éléments ne peuvent pas être utilisés pour des éléments vides car leurs définitions HTML ne permettent aucun contenu. Ceci est une erreur de catégorie. Les règles de syntaxe d'un langage de balisage ne restreignent pas ce que vous pouvez faire en CSS
Pour conclure, :after
et ne :before
sont actuellement pas utilisables pour les éléments vides (sauf marginalement pour hr
), mais cela est principalement dû aux implémentations et peut changer dans le futur.
<before></before>
" dans la source.