html - 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元素不能有伪元素，因为它们不能有子元素——<code>::before 被插入到元素中。它看起来像这样：

<img><before></img>

或者至少它不是由规范定义的

该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。

Answer 2

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