it-swarm.it

Perché no: before e: after gli pseudo elementi funzionano con gli elementi `img`?

Sto cercando di usare un :before pseudo element con un elemento img.

Considera questo HTML e CSS ...

HTML

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

CSS

img:before {
  content: "hello";
}

jsFiddle .

Questo non produce l'effetto desiderato (testato in Chrome 13 e Firefox 6). Tuttavia, funziona con un elemento div o span.

Perchè no?

C'è un modo per far funzionare gli pseudo elementi con img elementi?

113
alex

Le specifiche dicono ...

Nota. Questa specifica non definisce completamente l'interazione di :before e :after con elementi sostituiti (come IMG in HTML). Questo sarà definito in modo più dettagliato in una specifica futura.

Immagino che questo significhi che non funzionano con img elementi (per ora).

Vedi anche questa risposta .

118
alex

Solo per testare e sapere che non è carino puoi fare quanto segue per far funzionare gli pseudo elementi con elementi 'img'.

Aggiungi: display: block; content: ""; height: (height of image)px all'elemento img nel tuo CSS.

Anche se renderà il tuo tag img vuoto causa del content: "" Che puoi quindi

Aggiungi: style="background-image: url(image.jpg)" al tuo elemento img in html.

Testato in Fx, Chrome e Safari

6
Ferdi Emmen

È possibile che i fornitori di browser non abbiano implementato pseudo elementi sul tag img a causa della loro interpretazione della specifica: l'elemento img, a rigor di termini, non è un elemento a livello di blocco o un elemento inline , è un elemento vuoto .

5
Joel Glovier