Heim >Web-Frontend >CSS-Tutorial >Warum funktionieren Pseudoelemente nicht mit „Tags' in CSS?

Warum funktionieren Pseudoelemente nicht mit „Tags' in CSS?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-15 02:59:11280Durchsuche

Why Don't Pseudo-elements Work with `` 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn