img:after funktioniert nicht p:after schon

[Mathias Brodala]

Hallo Cheatah.

Ich bin generell der Ansicht, dass Pseudoelemente außerhalb von Elementen zu platzieren sind.

Beide Varianten haben erhebliche Auswirkungen, die die jeweils andere Wahl als vorteilhaft erscheinen lassen ;-) Ich glaube aber, dass die "innerhalb"-Variante das bessere Verhältnis von Vor- zu Nachteilen hat.

Inwiefern genau? Welchen Nachteil sollte es haben, wenn Pseudoelemente außerhalb platziert werden?

Interessant ist in diesem Zusammenhang auch das Rendering Firefox’ und Konquerors’ bei folgendem Code:
<a href="" />
Sowohl ::before als auch ::after werden hier doppelt eingefügt. Eine Ahnung, warum?

Ja: Schau Dir den Generated Source an. Bei (X)HTML akzeptiert Gecko die Kurzschreibweise "<foo/>" nicht, wenn das Content-Modell des Elements nicht Empty ist. In Folge dessen wird das Element lediglich geöffnet, aber nicht an dieser Stelle geschlossen. Ein "<span/><span/><span/><img/><div>..." wird somit zum "<span><span><span><img/></span></span></span><div>...".

Aha, danke.

Aus:

<p><a href=""/></p>

Wird:

<p><a href=""></a></p>  
<a href="">  
</a>

Nur dass er das „Echo“ des eigentlichen Elementes außerhalb seines Elternelementes platziert, ist merkwürdig.

Einen schönen Donnerstag noch.

Gruß, Mathias