CSS: dopo non aver aggiunto contenuto a determinati elementi

Ho problemi a comprendere il comportamento della :afterproprietà CSS . Secondo le specifiche ( qui e qui ):

Come indica il loro nome, le :beforee :afterpseudo-elementi specificano la posizione del contenuto prima e dopo il contenuto albero del documento di un elemento.

Ciò non sembra porre restrizioni su quali elementi possono avere una :after(o :before) proprietà. Tuttavia, sembra di lavorare solo con specifici elementi ... <p>opere, <img>non lo fa, <input>non lo fa, <table>lo fa. Potrei testare di più, ma il punto è chiaro. Nota che questo sembra abbastanza coerente tra i browser. Cosa determina se un oggetto può accettare una proprietà :beforee :after?

imge inputsono entrambi elementi sostituiti .

Un elemento sostituito è qualsiasi elemento il cui aspetto e le cui dimensioni sono definite da una risorsa esterna. Esempi includono immagini ( <img>tag), plugin ( <object>tag), e gli elementi di forma ( <button>, <textarea>, <input>, e <select>tag). Tutti gli altri tipi di elementi possono essere indicati come elementi non sostituiti.

:beforee :afterfunziona solo con elementi non sostituiti.

Dalle specifiche :

Nota. Questa specifica non definisce completamente l'interazione di :beforee :aftercon gli elementi sostituiti (come IMG in HTML). Ciò sarà definito in maggiore dettaglio in una specifica futura.

Con span:before, span:after, il DOM ha questo aspetto:

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

Evidentemente, questo non funzionerà <img src="" />.

:beforee :afternon sono tenuti a lavorare per elementi sostituiti e le specifiche CSS non specificano come funzionerebbero per loro, e il concetto di elemento sostituito è alquanto vago.

La specifica CSS 2.1 suggerisce chiaramente che possono funzionare per elementi sostituiti, semplicemente dicendo che non "definisce completamente" come. Ciò si riferisce al problema per cui 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 finora non è avvenuto.

I fornitori di browser hanno semplicemente deciso di evitare problemi non implementando affatto questi pseudo-elementi per alcuni elementi.

Non è affatto chiaro cosa significhi "elemento sostituito" e il significato sembra essere leggermente cambiato. Viene spesso interpretato nel senso che significa lo stesso di un elemento vuoto (un elemento con EMPTYcontenuto dichiarato, cioè un elemento che non può avere alcun contenuto), ma CSS 2.1 stesso mostra un foglio di stile di esempio con il selettore br:before(sebbene i browser lo abbiano ignorato, implementando bril proprio modo). Si può sostenere che sempre più elementi sono entrati nell'ambito del rendering CSS, almeno in parte. Ad esempio, un inputelemento (inclusi il carattere, i colori, ecc.) È ampiamente controllabile con CSS nei browser moderni.

Browser attuali (Firefox, IE, Chrome) non sembrano sostenere l' :aftere :beforepseudo-elementi per elementi vuoti diversi hr. Per hrIE e Chrome posizionano il contenuto generato all'interno di una casella delimitata, che è l'implementazione di hr; il contenuto rende la scatola più alta. Firefox colloca il contenuto di entrambi (!) Pseudo-elementi dopo la regola orizzontale di cui è implementata hr. Questa variazione illustra i tipi di problemi di "interazione" a cui si fa riferimento in CSS 2.1.

Si afferma spesso che questi pseudo-elementi non possono essere utilizzati per elementi vuoti poiché le loro definizioni HTML non consentono alcun contenuto. Questo è un errore di categoria. Le regole di sintassi di un linguaggio di markup non limitano ciò che puoi fare in CSS

Per concludere, :aftere :beforeattualmente non sono utilizzabili per elementi vuoti (eccetto marginalmente per hr), ma ciò è dovuto principalmente alle implementazioni e potrebbero cambiare in futuro.

Gli elementi che non hanno un tag di chiusura sono elementi void 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 poiché 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%);
    }
  }
}