Matthias Apsel: generierter Content für img-Elemente

Om nah hoo pez nyeetz, alle!

Gibt es einen Grund, warum dieser Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>before für Grafiken</title>
<style type="text/css">
  img         {border: 1px solid; display: block;}
  img::before {display: block; content: "Text-before"; background: red;}
  img::after  {display: block; content: "Text-after"; background: blue;}
</style>
</head>
<body>
    <img src="schloss.gif" alt="Bild">
</body>
</html>

Testseite

nur im Opera zur Anzeige des generierten Inhalts führt?

bei fehlerhaftem Pfad zur Grafik zeigt FF den Alt-Text mit rotem Hintergrund an und der Content von ::after wird ebenfalls dargestellt.

IE8, 9, Saf und Chr zeigen keinerlei generierten Inhalt an.

Methode oder Denkfehler?

Matthias

--
Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
  1. Hi,

    AFAIK funktioniert :before/:after nur bei Elementen die einen Inhalt haben.
    Also nicht bei Elementen wie: <input>, <img>, <br> ...
    Ob das gewollt ist oder nicht find ich leider nicht.

    ~dave

  2. Grüße dich Matthias,

    Gibt es einen Grund, warum dieser Code
    [...]
    nur im Opera zur Anzeige des generierten Inhalts führt?

    CSS 2.1, 12.1 The :before and :after pseudo-elements besagt:

    Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

    bei fehlerhaftem Pfad zur Grafik zeigt FF den Alt-Text mit rotem Hintergrund an und der Content von ::after wird ebenfalls dargestellt.

    Interessantes verhalten.

    Methode oder Denkfehler?

    Ich hab jetzt keine Antwort gefunden. Die Nachfolgespezifikation für Generated Content is nur Low Priority. So schnell dürfte sich hier also nichts ändern.

    Gruß, Daniel

    1. Om nah hoo pez nyeetz, Daniel.S!

      CSS 2.1, 12.1 The :before and :after pseudo-elements besagt:

      Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

      Die Nachfolgespezifikation für Generated Content is nur Low Priority. So schnell dürfte sich hier also nichts ändern.

      Danke,

      damit ist alles gesagt. Es hilft wohl nur ein zusätzliches Element.

      Matthias

      --
      Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif