img的伪元素奇怪行为[重复]答案

【问题标题】：Pseudo element strange behaviour with img [duplicate]img的伪元素奇怪行为[重复]
【发布时间】：2012-11-13 05:37:14
【问题描述】：

试图制作有关其下方图像的信息。但是有一个问题...伪元素不可见..

<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

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

img 元素不能有伪元素，因为它们不能有子元素——::before 被插入到元素中。它看起来像这样：

<img><before></img>

或者至少 spec 没有定义它

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

【讨论】：

【解决方案2】：

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

【讨论】：