CSS: dopo aver aggiunto il contenuto a determinati elementi

Ho difficoltà a capire il comportamento del CSS :after proprietà. Secondo le specifiche ( qui e qui ):

Come indicano i loro nomi, gli pseudo-elementi :before e :after specificano la posizione del contenuto prima e dopo il contenuto della struttura del documento di un elemento.

Questo non sembra porre restrizioni su quali elementi possono avere una proprietà :after (o :before ). Tuttavia, sembra funzionare solo con elementi specifici …

funziona, no, no,

fa. Potrei testare di più, ma il punto è fatto. Si noti che questo sembra abbastanza coerente tra i browser. Cosa determina se un object può accettare a :before e :after property?

img e input sono entrambi elementi sostituiti .

Un elemento sostituito è qualsiasi elemento il cui aspetto e dimensioni sono definiti da una risorsa esterna. Gli esempi includono immagini (tag ), plug-in ( tag) ed elementi del modulo ( , , e tag). Tutti gli altri tipi di elementi possono essere indicati come elementi non sostituiti.

:before e :after solo lavori con elementi non sostituiti.

Dalla specifica :

Nota. Questa specifica non definisce completamente l’interazione di :before e :after con elementi sostituiti (come IMG in HTML). Questo sarà definito in modo più dettagliato in una specifica futura.

Con span:before, span:after , il DOM appare così:

 Content of span 

Evidentemente, ciò non funzionerà con .

:before e :after non sono obbligati a lavorare per gli elementi sostituiti, e le specifiche CSS non specificano come potrebbero funzionare per loro, e il concetto di elemento sostituito è alquanto vago.

Le specifiche CSS 2.1 suggeriscono chiaramente che possono lavorare per elementi sostituiti, dicendo semplicemente che non definisce “completamente” come. Questo si riferisce al problema che ci si aspetta che un elemento sostituito abbia il proprio rendering visivo, che non è controllato dai CSS, mentre gli pseudo-elementi dovrebbero aggiungere qualcosa al contenuto dell’elemento. La specifica aggiunge che questo sarà definito “in modo più dettagliato” in una specifica futura, ma questo non è stato fatto finora.

I produttori di browser hanno deciso di evitare i problemi non implementando questi pseudo-elementi per alcuni elementi.

Non è chiaro cosa significhi “elemento sostituito” e il significato sembra essere cambiato in qualche modo. Viene spesso interpretato come identico a un elemento vuoto (un elemento con il contenuto dichiarato EMPTY , ovvero un elemento che non può avere alcun contenuto), ma lo stesso CSS 2.1 mostra un foglio di stile campione con il selettore br:before (sebbene i browser abbiano ignorato questo , implementandoli a modo loro). Si può sostenere che sempre più elementi sono stati spostati nell’ambito del rendering CSS, almeno in parte. Ad esempio, un elemento di input (incluso il font, i colors, ecc.) È ampiamente controllabile con i CSS nei browser moderni.

I browser attuali (Firefox, IE, Chrome) non sembrano supportare :after e :before pseudo-elementi per elementi vuoti diversi da hr . Per hr , IE e Chrome posiziona il contenuto generato all’interno di una casella bordata, che è l’implementazione di hr ; il contenuto rende la scatola più alta. Firefox inserisce il contenuto di entrambi (!) Pseudo-elementi dopo la regola orizzontale che è la sua implementazione di hr . Questa variazione illustra i tipi di problemi di “interazione” a cui si fa riferimento nel CSS 2.1.

Spesso si afferma che questi pseudo-elementi non possono essere usati per elementi vuoti poiché le loro definizioni HTML non consentono alcun contenuto. Questo è un errore di categoria. Le regole di syntax di un linguaggio di markup non limitano ciò che puoi fare nei CSS

Per concludere,: :after e :before sono attualmente utilizzabili per elementi vuoti (tranne marginalmente per hr ), ma ciò è dovuto principalmente alle implementazioni e potrebbe cambiare in futuro.

Gli elementi che non hanno un tag di chiusura sono elementi vuoti e non possono visualizzare il contenuto al loro interno:

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

Tutti i browser Blink, Webkit e Quantum consentono di creare pseudo elementi solo sulle caselle di controllo, ma questo è controverso in quanto nessuna specifica consente questo comportamento.

Ecco un esempio: 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%); } } }