伪元素与img的奇怪行为

Question

试图在其下面提供有关图像的信息。但是有一个问题...伪元素不可见..

<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

感谢。

Answer 1

img元件不能有伪构件，因为他们不能有CHILDREN- ::before插入元件内。它应该是这样的：

<img><before></img> 

或者至少ITT不被spec

本规范中定义不完全定义的互动：前：用替换元素后（如IMG在HTML中）。这将在未来的规范中更详细地定义。

Answer 2

伪元素被添加/添加到元素的内容。由于<img>（例如<input>）没有内容，因此它不能应用伪元素。