CSS: après l'ajout de contenu à certains éléments
J'ai du mal à comprendre le comportement du CSS :after propriété. Selon la spécification ( ici et ici ):
Comme leurs noms l'indiquent, les
:beforeet:afterLes pseudo-éléments spécifient l'emplacement du contenu avant et après le contenu de l'arborescence de documents d'un élément.
Cela ne semble pas imposer de restrictions sur les éléments pouvant avoir un :after (ou :before) propriété. Cependant, cela ne semble fonctionner qu'avec éléments spécifiques ... <p> travaux, <img> ne le fait pas, <input> ne le fait pas, <table> Est-ce que. Je pourrais tester plus, mais le point est fait. Notez que cela semble assez cohérent sur tous les navigateurs. Qu'est ce qui détermine si un objet peut accepter un :before et :after propriété?
img et input sont tous les deux éléments remplacés .
Un élément remplacé est un élément dont l'apparence et les dimensions sont définies par une ressource externe. Les exemples incluent des images (
<img>tags), plugins (<object>tags) et des éléments de formulaire (<button>,<textarea>,<input>, et<select>Mots clés). Tous les autres types d'éléments peuvent être qualifiés d'éléments non remplacés.
:before et :after fonctionne uniquement avec des éléments non remplacés.
De la spec :
Remarque. Cette spécification ne définit pas complètement l'interaction de
:beforeet:afteravec des éléments remplacés (tels que IMG en HTML). Ceci sera défini plus en détail dans une spécification future.
Avec span:before, span:after, le DOM ressemble à ceci:
<span><before></before>Content of span<after></after></span>
Evidemment, ça ne marchera pas avec <img src="" />.
:before et :after ne sont pas nécessaires pour fonctionner avec des éléments remplacés, et les spécifications CSS ne précisent pas comment elles fonctionneraient pour eux, et le concept d'élément remplacé est un peu vague.
La spécification CSS 2.1 indique clairement suggère qu'ils peuvent travailler pour les éléments remplacés, indiquant simplement qu'elle ne "définit pas complètement" la manière dont . Cela concerne le problème selon lequel un élément remplacé devrait 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 spécification future, mais cela n'a pas encore eu lieu.
Les fournisseurs de navigateurs ont simplement décidé d'éviter les problèmes en n'implémentant pas ces pseudo-éléments pour certains éléments.
La signification de "élément remplacé" n’est pas claire, 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 EMPTY un contenu déclaré, c'est-à-dire un élément qui ne peut avoir aucun contenu), mais CSS 2.1 lui-même affiche un exemple de feuille de style avec le sélecteur br:before _ (bien que les navigateurs l'aient ignoré, implémentant br à leur manière). On peut affirmer que de plus en plus d'éléments sont passés au moins en partie dans le rendu CSS. Par exemple, un élément input (y compris sa police, ses couleurs, etc.) est en grande partie contrôlable avec CSS dans les navigateurs modernes.
Les navigateurs actuels (Firefox, IE, Chrome) ne semblent pas supporter le :after et :before pseudo-éléments pour les éléments vides autres que hr. Pour hr, IE et Chrome placez le contenu généré dans une zone encadrée, qui est l'implémentation de hr; _; le contenu rend la boîte plus grande. Firefox place le contenu des deux (!) pseudo-éléments après la règle horizontale correspondant à son implémentation de hr. Cette variante illustre les types de problèmes d’interaction auxquels il est fait référence dans 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 limitent pas ce que vous pouvez faire en CSS
De conclure, :after et :before ne sont actuellement pas utilisables pour les éléments vides (sauf marginalement pour hr), mais ceci est principalement dû à des implémentations et peut changer dans le futur.