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

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, la :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) propriété. Cependant, il semble être la seule à travailler avec des éléments spécifiques... <p> œuvres, <img> n'est pas, <input> n'est pas, <table> n'. 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 propriété?

InformationsquelleAutor eykanal | 2011-08-04

css pseudo-element

144

img et input sont à la fois remplacé é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> balises), 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 travaillons uniquement avec des non-remplacement d'éléments.

De le spec:

Note. 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="" />.
- "Contenu généré ne modifie pas l'arborescence du document." Donc, je serais surpris si vous avez été en mesure de trouver quelque chose comme "<before></before>" dans la source.
- Vous avez raison, je m'explique mal. Vous ne trouverez jamais <before></before>. J'aurais dit "faire semblant DOM" ou quelque chose. Le point était de montrer que :before et :after sont à l'intérieur de l'élément, non pas en dehors.
- Je me demande si elles sont stockées dans le shadow DOM.
- Non, ils ne sont pas stockés dans l'ombre DOM.
- La spec cité ne dit pas que :before et :after ne fonctionnent pas pour remplacer les éléments; il dit seulement qu'il “ne définissent entièrement” comment faire, et que ce sera à définir dans l'avenir (qui n'est pas arrivé jusqu'à présent). Ce qui se passe dans les DOM est pas pertinente ici. Alors que les navigateurs ne prennent pas en charge l'appui de ces pseudo-éléments pour certains éléments, c'est pas dans les specs, juste ce que les implémentations de le faire.
- J'ai utilisé pour examiner logique à l'explication que ::before et ::after ne travaille pas pour le void (vide) d'un élément qui n'ont jamais contenu réel, avant/après qui ils pourraient s'appliquer. Mais, étonnamment, ils travaillent pour hr élément dans presque tous les navigateurs.
- Les navigateurs basés sur WebKit tendance ne vous permettent d'utiliser des pseudo-éléments à remplacer les éléments, mais encore, elle n'a pas l'habitude de travailler dans d'autres navigateurs.
- La chose drôle est, il est mentionné sur une W3C remarque (les Fonctions d'Accessibilité de CSS, 4 août 1999). Et selon ceci, il est pris en charge sur une ancienne version de l'Opéra, mais plus tard a chuté.
InformationsquelleAutor thirtydot
9

:before et :after ne sont pas nécessaire de travail 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 peut de travail 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.

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” signifie, 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 déclaré contenu, 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 leur propre chemin). 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 la :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 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 de 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.

InformationsquelleAutor Jukka K. Korpela
-1

Éléments qui n'ont pas de balise de fermeture sont nuls éléments et ils ne peuvent pas afficher le contenu à l'intérieur d'eux:

https://www.w3.org/TR/html5/syntax.html#void-elements

Tous Blink, Webkit et le Quantum des navigateurs vous permettent de créer des éléments pseudo uniquement sur les cases à cocher, mais cela est sujet à controverse car aucune spec permettre ce comportement.

Voici un exemple:
https://codepen.io/equinusocio/pen/BOBaEM/
```
input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}
```
- il ne fonctionnera pas dans tous les navigateur ... et il n'y a pas de spécification qui dit nous pouvons maintenant .. si vous en avez un merci de la partager, car il n'est pas sûr de considérer pseudo-élément avec entrée
- Il fonctionne dans tous les navigateurs sauf IE. Même flexbox est pas pris en charge par IE 9 alors, où est le problème. Cette solution fonctionne sur tous Blink, Webkit et le Quantum des navigateurs et peut être très utile pour les personnes qui travaillent sur webkit-seulement de l'environnement, comme d'Électrons.
- Comme vous l'avez dit dans votre réponse, il n'y a pas de spécification pour elle, alors un jour, il peut cesser de fonctionner. Ce n'est pas la seule chose qui se comportent et fonctionne sans spec défini, mais il ne faut jamais compter sur eux et de dire qu'il travaille. c'est comme obselete balises, ils ont encore du travail mais nous devrions cesser de l'utiliser parce qu'un jour ils ne seront pas. Donc oui, cela peut être utile aux gens, et mes commentaires sont également utiles pour avertir les gens qu'ils doivent être conscients que ce n'est pas officiel.
InformationsquelleAutor Mattia Astorino

Vous devez vous connecter pour publier un commentaire.