CSS: après l'ajout de contenu à certains éléments

Question

Je vais avoir de la difficulté à comprendre le comportement de la CSS :after de la propriété. Selon la spécification (ici et ici):

Comme leurs noms l'indiquent, l' :before et :after pseudo-éléments de spécifier l'emplacement du contenu avant et après un élément de l'arborescence du document contenu.

Cela ne semble pas imposer des restrictions sur les éléments qui peuvent avoir un :after (ou :before) de la propriété. Cependant, il semble être la seule à travailler avec des éléments spécifiques... <p> œuvres, <img> ne le sont pas, <input> ne le sont pas, <table> . Je suis peut tester de plus, mais le point est fait. Notez que cela semble assez cohérent sur tous les navigateurs. Ce qui détermine si un objet peut accepter un :before et :after de la propriété?

Answer 1

img et input sont à la fois remplacés éléments.

Un élément remplacé est tout élément dont l'aspect et les dimensions sont défini par une ressource externe. Les exemples incluent les images (<img>tags), plugins (<object> tags), et les éléments de formulaire (<button>, <textarea>, <input>, et <select> tags). Tous les autres types d'éléments peuvent être mentionnés non-remplacer les éléments.

:before et :after seulement de travailler avec des non-remplacement d'éléments.

À partir de la spécification:

Remarque. Cette spécification ne pas définir complètement l'interaction de :before et :after avec remplacée éléments (tels que des IMG en HTML). Cette sera définie plus en détail dans un futur cahier des charges.

Avec span:before, span:after, le DOM ressemble à ceci:

<span><before></before>Content of span<after></after></span>

De toute évidence, cela ne fonctionnera pas avec <img src="" />.

Answer 2

:before et :after ne sont pas tenus de travailler pour remplacer les éléments, et les spécifications CSS ne précisez pas la façon dont ils travaillent pour eux, et le concept de l'élément remplacé est un peu vague.

La spécification CSS 2.1 clairement suggère qu'ils peuvent travailler pour remplacer les éléments, juste dire qu'il n'est pas "entièrement définir le" comment". Cela se rapporte à la question qui a remplacé l'élément devrait avoir sa propre rendu visuel, qui n'est pas contrôlée par le CSS, alors que les pseudo-éléments doit ajouter quelque chose au contenu de l'élément. La spec ajoute que ce sera définie "plus en détail" dans un futur cahier des charges, mais cela n'a pas eu lieu jusqu'à présent.

Les fournisseurs de navigateur juste décidé d'éviter les problèmes de non-application, ces pseudo-éléments pour certains éléments.

Il n'est pas clair du tout ce que "remplacé élément", et le sens semble avoir quelque peu changé. Elle est souvent interprétée comme signifiant la même comme élément vide (un élément avec EMPTY teneur déclarée, c'est à dire un élément qui ne peut pas avoir de contenu), mais le CSS 2.1 montre un exemple de feuille de style avec le sélecteur br:before (bien que les navigateurs ont ignoré cela, la mise en œuvre de br de leur propre façon). Il peut être soutenu que de plus en plus d'éléments sont entrés dans le champ d'application de rendu CSS, au moins en partie. Par exemple, un input élément (y compris la police, les couleurs, etc.) est largement contrôlable avec les CSS dans les navigateurs modernes.

Actuelle des navigateurs (Firefox, IE, Chrome) ne semblent pas soutenir l' :after et :before pseudo-éléments pour les éléments vides autre que hr. Pour hr, IE et Chrome placer le contenu généré à l'intérieur d'une bordée boîte, qui est la mise en œuvre de l' hr; le contenu de la zone de plus grand. Firefox lieux le contenu des deux (!) pseudo-éléments à partir de la règle horizontale qui est de sa mise en œuvre d' hr. Cet écart illustre le genre de "l'interaction" des problèmes qui sont mentionnés dans le CSS 2.1.

Il est souvent affirmé que ces pseudo-éléments ne peuvent pas être utilisés pour les éléments vides depuis leur code HTML définitions ne permettent pas de tout contenu. C'est une catégorie d'erreur. Les règles de syntaxe d'un langage de balisage de ne pas limiter ce que vous pouvez le faire en CSS

Pour conclure, :after et :before sont actuellement pas utilisable pour les éléments vides (sauf marginalement pour hr), mais cela est principalement dû à des implémentations et peut changer dans le futur.