Warum fügt „:after' keinen Inhalt zu ersetzten Elementen hinzu?

Warum fügt :after Inhalt zu einigen Elementen hinzu, aber nicht zu anderen?

Das CSS-Pseudoelement :after ist dazu gedacht, Inhalt danach hinzuzufügen Der Dokumentbauminhalt eines Elements. Es wurde jedoch beobachtet, dass diese Funktionalität nur für bestimmte Elemente konsistent funktioniert. Um dieses Verhalten zu verstehen, müssen wir das Konzept der ersetzten Elemente untersuchen.

Gemäß der CSS-Spezifikation sind ersetzte Elemente solche, deren Aussehen und Abmessungen durch eine externe Ressource wie Bilder, Plugins und Formulare definiert werden Elemente. Im Gegensatz dazu sind nicht ersetzte Elemente solche, deren visuelle Eigenschaften durch CSS oder den Standardstil des Browsers gesteuert werden.

Wichtig: :before und :after funktionieren nur mit nicht ersetzten Elementen. Das bedeutet, dass Bildern, ersetzten Formularsteuerelementen und anderen ersetzten Elementen kein Inhalt mithilfe dieser Pseudoelemente hinzugefügt werden kann.

Der Grund für diese Einschränkung ist, dass ersetzte Elemente normalerweise eine vordefinierte Größe und ein vordefiniertes Erscheinungsbild haben. Dadurch ist es unpraktisch, zusätzliche Inhalte davor oder danach einzufügen. Stattdessen werden die visuellen Eigenschaften ersetzter Elemente typischerweise durch ihren Quellcode oder CSS-Stile gesteuert.

Beispielsweise fügt das folgende HTML und CSS Inhalte vor und nach einem Absatzelement hinzu, funktioniert aber nicht für ein Bild :

<p><span>Before</span>Paragraph Content<span>After</span></p>
<img src="image.jpg"/><span>After Image</span>

p:before {
  content: "Before: ";
}

p:after {
  content: " After";
}

img:after {
  content: "After Image";
}

Durch das Verständnis des Konzepts der ersetzten Elemente können wir erklären, warum :after für bestimmte Elemente funktioniert, für andere jedoch nicht, und es wird klar, dass das Verhalten beabsichtigt und konsistent ist Browser.

Das obige ist der detaillierte Inhalt vonWarum fügt „:after' keinen Inhalt zu ersetzten Elementen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!