¿Por qué no: antes y después de que los pseudo elementos funcionen con elementos `img`?

Estoy tratando de usar un :before pseudo elemento con un elemento img .

Considere este HTML y CSS …

HTML

  

CSS

 img:before { content: "hello"; } 

jsFiddle .

Esto no produce el efecto deseado (probado en Chrome 13 y Firefox 6). Sin embargo, funciona con un elemento div o span .

Por qué no?

¿Hay alguna manera de hacer que los pseudo elementos funcionen con elementos img ?

La especificación dice …

Nota. Esta especificación no define completamente la interacción de :before y :after con los elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una especificación futura.

Supongo que esto significa que no funcionan con elementos img (por ahora).

También vea esta respuesta .

Solo para probar y saber que no es bonito, puede hacer lo siguiente para que los pseudo elementos funcionen con elementos ‘img’.

Agregar: display: block; content: ""; height: (height of image)px display: block; content: ""; height: (height of image)px display: block; content: ""; height: (height of image)px al elemento img en su CSS.

Aunque hará que tu etiqueta img sea una causa vacía del content: "" puedes entonces

Agregue: style="background-image: url(image.jpg)" a su elemento img en html.

Probado esto en Fx, Chrome y Safari

Podría ser que los proveedores de navegadores no hayan implementado pseudo-elementos en la etiqueta img debido a su interpretación de la especificación: el elemento img , estrictamente hablando, no es un elemento de nivel de bloque o un elemento en línea, es un elemento vacío .