img:after funktioniert nicht p:after schon

[D.R.]

Hallo,

Ich wollte gerne zu jedem Bild automatisch, per CSS einen Text hinzufügen. Die Forensuche hat mich auf img:after (img::after?) gebracht. Allerdings funktioniert das hier im Mozilla 1.7 / FF 1.5 nicht. Wenn ich statt "img" "p" nehme, dann erscheint korrekt, hinter jedem <p> der angegebene Content.

Natürlich, die Pseudoelemente :after und :before erzeugen _innerhalb_ des selektierten Elements ein weiteres beliebiges Element, das entweder am Anfang (:before) oder am Ende (:after) steht.

Hier ein Beispiel:
[Beispiel]
Hier wird das alt-attribut des img nicht angezeigt. das class-attribut von p aber schon.

Das was du vorhast, würde folgendes erzeugen:

Absatz (p):
<p>Normaler Text[Klasse]</p>

Bild (img):
<img src="blablabla">[Alternativtext]</img>

Ist das ein bekannter bug?

Nö, img ist ein Element, das keinen Inhalt haben _darf_.

Mache ich was falsch?

Gewissermaßen schon, ja. Ich fand die Wirkungsweisen dieser Pseudoelemente aber auch immer etwas verwirrend.

Oder hat jemand einen Tipp, was ich sonst noch unternehmen könnte?

Ein anderes Element um das Bild ziehen, und diesem die Pseudoelemente zuweisen.

Dann würde etwas in der Form rauskommen:
span:after {content:"After-Text"}
<span><img src="blablabla"/>After-Text</span>

Leider kannst du dann aber nicht mehr auf Attribute von img zugreifen.

mfg. Daniel