Warum funktioniert CSS :after nicht mit allen HTML-Elementen?

CSS :after-Verhalten und Elementkompatibilität

Die CSS :after-Eigenschaft erweitert den Inhalt nach einem Element in seinem Dokumentfluss. Allerdings scheinen nicht alle Elemente dieses Verhalten zu unterstützen. Warum funktioniert :after nur mit bestimmten Elementen?

Antwort: Ersetzte Elemente vs. nicht ersetzte Elemente

Gemäß der CSS-Spezifikation können nur nicht ersetzte Elemente haben :before- und :after-Eigenschaften. Aussehen und Abmessungen ersetzter Elemente werden extern bestimmt, einschließlich Elementen wie Bildern, Plugins und Formularsteuerelementen.

Was sind ersetzte Elemente?

Ersetzte Elemente umfassen:

• Bilder ()
• Plugins (
• Formularelemente (, , <input>, <select>)</select>

Warum: vorher und :nach Nicht mit ersetzten Elementen arbeiten

Das CSS Die Spezifikation weist darauf hin, dass die Interaktion von :before und :after mit ersetzten Elementen nicht vollständig definiert ist. Dieser Aspekt ist für eine zukünftige Spezifikation reserviert.

Beispiel

Betrachten Sie das folgende Beispiel:

<span>Content of span</span>

span:before {
  content: "Before ";
}

span:after {
  content: " After";
}

Die DOM-Struktur dafür Beispiel wäre:

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

Diese Struktur funktioniert nicht für ersetzte Elemente wie Bilder, da sie keinen Inhalt darin haben Weise als nicht ersetzte Elemente.

Daher kann die CSS-Eigenschaft :after nur mit nicht ersetzten Elementen verwendet werden, da deren Aussehen durch den Inhalt innerhalb des Elements selbst bestimmt wird.

Das obige ist der detaillierte Inhalt vonWarum funktioniert CSS :after nicht mit allen HTML-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!