Warum funktionieren Pseudoelemente nicht mit „Tags' in CSS?

Pseudoelemente und Bildelemente: Ein CSS-Rätsel

Trotz der weit verbreiteten Anwendbarkeit von Pseudoelementen wie :before und :after in CSS sind ihre Funktionalität mit Bildelementen () blieb eine rätselhafte Ausnahme. Wie im Codeausschnitt unten gezeigt, führt das Hinzufügen von Pseudoelementen zu einem img-Element nicht zum erwarteten Ergebnis:

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

img:before {
  content: "hello";
}

Während es nahtlos mit anderen Elementen wie div und span funktioniert, ist der gewünschte Effekt fehlt, wenn es auf img-Elemente angewendet wird.

Hinter den Kulissen: Die CSS-Spezifikation

Das CSS Die Spezifikation beleuchtet diese Diskrepanz. Darin heißt es ausdrücklich, dass die Interaktion zwischen Pseudoelementen und ersetzten Elementen, einschließlich img in HTML, in der aktuellen Version nicht vollständig definiert ist. Dies bedeutet, dass die aktuelle Spezifikation das Verhalten von Pseudoelementen mit img-Elementen nicht spezifiziert.

Mögliche Lösung: Warten auf Standardisierung

Diese Situation wird jedoch möglicherweise nicht auf unbestimmte Zeit bestehen bleiben. Die Spezifikation legt nahe, dass die Interaktion zwischen Pseudoelementen und ersetzten Elementen in einer zukünftigen Version weiter definiert wird. Dies lässt uns erwarten, dass Pseudoelemente irgendwann umfassender und konsistenter für img-Elemente unterstützt werden.

Bis dahin müssen Entwickler, die mit img-Elementen ähnliche Effekte erzielen möchten, möglicherweise alternative Ansätze in Betracht ziehen, z B. die Verwendung von JavaScript oder das Erstellen eines zusätzlichen Wrapper-Elements um das img.

Das obige ist der detaillierte Inhalt vonWarum funktionieren Pseudoelemente nicht mit „Tags' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!