Warum funktionieren die Pseudoelemente „:before' und „:after' nicht mit „Elementen'?

Adressierung der Funktionalität von Pseudoelementen mit Bildelementen

Um die Funktionalität zu verbessern, untersucht diese Frage, warum Pseudoelemente wie :before und :after interagiert nicht mit Bildelementen (), wie dies bei anderen Tags wie Divs und Spans der Fall ist. Um das Problem zu veranschaulichen, betrachten Sie das folgende HTML und CSS:

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt=""/>

img:before {
  content: "hello";
}

Bei der Untersuchung dieses Codes in Browsern wie Chrome 13 und Firefox 6 wird deutlich, dass am Bildelement keine erwarteten Änderungen auftreten. Dieses Verhalten steht im Gegensatz zur Kompatibilität von div- und span-Elementen.

Beim Eintauchen in die Spezifikationen stoßen wir auf diesen Auszug:

Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Diese Aussage legt eine unvollständige Definition für die Interaktion zwischen Pseudoelementen nahe und Bildelemente, was deren derzeitige Inkompatibilität impliziert. Weitere Einblicke in diese Angelegenheit finden Sie in einer anderen Antwort auf dieser Plattform.

Das obige ist der detaillierte Inhalt vonWarum funktionieren die Pseudoelemente „:before' und „:after' nicht mit „Elementen'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!