How to display img alt text using CSS? [duplicate]

Question

I've tried this and it works fine

<p alt="world">hello</p>

With CSS

p::after {
  content: attr(alt);
}

---

But it doesn't work when I try

<img src="http://placehold.it/300x300" alt="my image caption">

With CSS

img::after {
  content: attr(alt);
}

---

Is it possible to output alt text for an img using CSS?

Please indicate browser compatibility with any solution you provide.

Here's a jsfiddle

Answer 1

This is by design.

img tags are self-closing (<tag />) tag, and therefore they contain no "content". Since they do not contain any content, no content can be appended (i.e. ::after) or prepended (i.e. ::before).

This is also the case for other self-closing HTML elements:

<area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <keygen>, <link>, <meta>, <param>, <source>, <track> and <wbr>

Here's what the (CSS2) Spec says:

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. [2014: hasn't happened yet]

Source: http://www.w3.org/TR/CSS2/generate.html#before-after-content