伪元素奇怪的行为与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元素不能包含伪元素，因为它们不能有子元素 - ::before插入元素中。它看起来像这样：

<img><before></img>

或者至少itt不是由spec

定义的

  

此规范未完全定义：替换元素（例如HTML中的IMG）之前和之后的交互。这将在未来的规范中更详细地定义。

Answer 2

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