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

pseudo elementos css ejemplos

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿No funciona antes en los elementos img? 6 respuestas
• CSS: después de no agregar contenido a ciertos elementos 2 respuestas

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

Considere este HTML y CSS ...

HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

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 ?

Answer 1

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 .

Answer 2

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

Answer 3

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 .