:before will nicht bei <img>

[Deus Figendi]

Guten Abend,
im Archiv habe ich einen Thread gefunden (der Tab ist wieder zu, daher gerade kein Link zur Hand) in dem jemand wollte, dass auf mobilen Endgeräten für Bilder nur der Alternativtext angezeigt wird.
Nun ich habe ein ganz ähnliches Problem, bei mir sind's halt die Drucker :)
Dem Benutzer "damals" konnte nicht geholfen werden aber nun hatte ich die Idee das ganze mit den Pseudoelementen :before bzw. :after zu realisieren (das war in dem damaligen Thread nicht angesprochen worden).
Die Idee: Vor ein Bild wird sein Alternativtext geschrieben, denn laut SELF kann man auf die Attribute zugreifen. Das Bild selber wird dann via display:none; oder falls dann auch der Pseudo-Inhalt verschwinden sollte halt mit width:1px; oder irgendwie so ausgeblendet. Soweit bin ich noch nicht. Der Haken: Es geht nicht!
Ich habe keine Ahnung warum, ich konnte auch keinen Hinweis finden dass das nicht mit <img>-Elementen gehen soll.
Hier ein HTML-Schnippsel (bitte nicht schimpfen, ich habe dem CMS-Template-Autor schon gesagt er soll das div durch ein <h1> ersetzen... kommt vielleicht/hoffentlich noch)

<div id="headline">  
    <img width="249" height="26" border="0"  
         title="Textinhalt des Bildes"  
         alt = "Textinhalt des Bildes"  
         src="uri/zum.bild"  
    />  
    <img width="190" height="26" border="0"  
         title="Textinhalt eines zweiten Bildes"  
         alt="Textinhalt eines zweiten Bildes"  
         src="uri/zum/zweiten.bild"  
    />  
</div>

So, das sind Überschriften um genau zu sein, folglich sollen sie ja auf dem Drucklayout auftauchen, die Idee:

div#headline img:before {  
 content:attr(alt);  
}

Und dann halt noch irgendwie Überschriftenmäßig formatieren. Wie auch immer, geht nicht. Geht nicht im Sinne von: Kommt nicht auf den Monitor.
"Okay" dachte ich mir "hast das mit dem Attribute-übernehmen irgendwie falsch verstanden" also was simples:

div#headline img:before {  
 content:"++++++++foobar++++++++++";  
 font-size:300%;  
}

Resultat: nix!
Nächster Versuch war dann das auf das div davor/darum anzuwenden:

div#headline:before {  
 content:"++++++++foobar++++++++++";  
 font-size:300%;  
}

Kein Problem, funktioniert wunderbar. Aber von da aus habe ich keinen Zugriff auf das alt-Attribut. Hm vielleicht liegt's am inline-Element... nein auch nicht div#headline img { display:block; } brachte auch keinen Erfolg. Nächster Versuch/Gedanke war, dass es vielleicht im Selektor liegt, aber auch direktes Anwenden auf ALLE Bilder brachte keinen Erfolg:

img:after{  
 content:"++++++++foobar++++++++++";  
 font-size:300%;  
}

So und nun hab ich keine Idee mehr. Hat jemand Vorschläge, Ideen? Sagt mir jemand dass das für <img>-Elemente nicht gilt? Oder nicht für leere Elemente? Irgendwas womit ich vielleicht weiter komme?

(Anm: Andere Pseudoelemente scheinen zu funktionieren, zumindest :hover habe ich getestet und war kein Problem)