Ich bin besonders daran interessiert zu verstehen, wann die::before und::after Pseudoelemente können auf sich selbst schließende Tags angewendet werden. Dies ist die Definition dieser Pseudoelemente nach dem W3 Generated Content CSS-Spezifikationen:

12.1 Das: vor und: nach Pseudoelementen: Autoren geben den Stil und die Position des generierten Inhalts mit: vor und: nach Pseudoelementen an. Wie der Name schon sagt, geben die Pseudoelemente: before und: after die Position des Inhalts vor und nach dem Inhalt der Dokumentstruktur eines Elements an. Die Eigenschaft 'content' gibt in Verbindung mit diesen Pseudoelementen an, was eingefügt wird.

Auf dieser Grundlage scheint es, dass diese Pseudo-Elemente dazu gedacht sind, den Inhalt eines Elements zu modifizieren. So wie ich es verstehe (obwohl ich keine maßgebliche Quelle gefunden habe, um dies zu unterstützen), wird "Inhalt" mehr oder weniger als "das Zeug zwischen dem öffnenden und dem schließenden Tag" definiert. Daher würde ich denken, dass Elemente, die keinen "Inhalt" haben (wie ein HTMLbr tag) sollte das @ nicht unterstütz::before und::after Pseudo-Elemente.

Extrapolierend auf diesem und basierend auf meinem Verständnis der Definition des "Inhalts" eines Elements, würde ich denken, dasskeine der selbstschließenden Tags würde das @ unterstütz::before und::after Pseudoelemente. In der Praxis habe ich jedoch festgestellt, dass viele selbstschließende Tags die volle Unterstützung haben.

Neben der Frage, was als "Inhalt" definiert ist, können wir auch die Tatsache berücksichtigen, dass Pseudoelemente als DOM-Kinder des Elements dargestellt werden (obwohl dies technisch nicht der Fall ist), auf das sie angewendet werden. Die Tatsache, dass selbstschließende Tags keine DOM-Kinder haben können, scheint die Idee zu stützen, dass selbstschließende Tags keine Pseudoelemente haben sollten.

ei meinem Versuch, die Antwort auf diese Frage zu finden, habe ich einen kleinen Test zusammengestellt, um festzustellen, welche selbstschließenden Tags (ich habe eine Handvoll davon ausgewählt, als sie mir in den Sinn kamen) unterstützt werde::before und::after, und ich habe diesen Test unten in ein Snippet eingebettet. Ich erhalte zwischen den Browsern radikal unterschiedliche Ergebnisse und kann nur eine sehr geringe Konsistenz feststellen.

.test {
  display: inline;
  visibility: hidden;
}

span + *::after {
  visibility: visible;
  color: green;
  content: 'YES';
}

<h3>Which Self-Closing Tags Support Pseudo Elements?</h3>
<div><span>Text Input:</span> <input type="text" class="test"></div>
<div><span>Checkbox Input:</span> <input type="checkbox" class="test"></div>
<div><span>Radio Input:</span> <input type="radio" class="test"></div>
<div><span>Submit Input:</span> <input type="submit" class="test"></div>
<div><span>Reset Input:</span> <input type="reset" class="test"></div>
<div><span>Button Input:</span> <input type="button" class="test"></div>
<div><span>Image:</span> <img class="test"></div>
<div><span>Line Break:</span> <br class="test"></div>
<div><span>Horizontal Rule:</span> <hr class="test"></div>
<div><span>Link:</span> <link class="test"></div>
<div><span>Meta:</span> <meta class="test"></div>

Ist meine Interpretation des::before und::after Spezifikation falsch? Ist meine Definition des "Inhalts" eines Elements falsch? Ich suche Antworten mit maßgeblichen Antworten, die erklären, was der "perfekte Browser" tun würde, wenn er diese Pseudoelemente in Verbindung mit selbstschließenden HTML-Tags genau gemäß den W3-CSS-Spezifikationen implementieren würde.

Bearbeiten: In Bezug auf "Ersetzte Elemente"

Ich bemerkte eine Zeile am unteren Rand der generierten Inhaltsspezifikationen, die besagte:

Hinweis. Diese Spezifikation definiert die Interaktion von: vorher und: nachher mit ersetzten Elementen (z. B. IMG in HTML) nicht vollständig. Dies wird in einer zukünftigen Spezifikation genauer definiert.

Dies könnte etwas mit der Antwort zu tun haben. Gemäßdiese Spezifikation, ein "ersetztes Element" ist definiert als:

Ein Element, dessen Inhalt außerhalb des Bereichs des CSS-Formatierungsmodells liegt, z. B. ein Bild, ein eingebettetes Dokument oder ein Applet. Beispielsweise wird der Inhalt des HTML-IMG-Elements häufig durch das Bild ersetzt, das durch das Attribut "src" gekennzeichnet ist. Ersetzte Elemente haben häufig intrinsische Dimensionen: eine intrinsische Breite, eine intrinsische Höhe und ein intrinsisches Verhältni

Ich kann keine maßgebliche Liste der ersetzten Elemente in der HTML-Spezifikation finden, aber ich konnte die meisten (oder alle) selbstschließenden Tags als passend für diese Definition erkennen. Ich bin mir auch nicht sicher, ob die "zukünftige Spezifikation", auf die in der ersten Note angespielt wurde, jemals abgeschlossen wurde.