Pseudo élément comportement étrange avec img

Question

Essayant de faire des informations sur l'image ci-dessous. Mais un problème survient ... élément pseudo n'est pas visible ..

<img info="hey guys" src="http://i024.radikal.ru/1211/4c/809c7c2dfa74.jpg"> 
<div info="I'm working, but I'm inside the block"></div> 

div { 
    height: 100px; 
    margin: 10px; 
    background: yellow; 
} 
div[info]::after, img[info]::after { 
    content: attr(info); 
    display: block; 
    margin: 3px; 
    color: black; 
    font-style: italic; 
} 

Jsfiddle DEMO

Merci.

Answer 1

img Les éléments ne peuvent pas avoir de pseudo-éléments, car ils ne peuvent pas avoir d'enfants. ::before est inséré dans l'élément. Il ressemblerait à ceci:

<img><before></img> 

Ou au moins itt n'est pas défini par le spec

Cette spécification ne définit pas complètement l'interaction entre: avant et: après des éléments remplacés (tels que IMG en HTML). Ceci sera défini plus en détail dans une future spécification.

Answer 2

Des pseudo-éléments sont ajoutés/ajoutés au contenu de l'élément. Comme un <img> (et un <input> par exemple) n'a pas de contenu, il ne peut pas avoir de pseudo-éléments appliqués dessus.