僞元素與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>）沒有內容，因此它不能應用僞元素。