如何使用CSS显示img alt文本？

Question

我已经尝试了这个并且工作正常

<p alt="world">hello</p>

使用CSS

p::after {
  content: attr(alt);
}

---

但是当我尝试

时它不起作用

<img src="http://placehold.it/300x300" alt="my image caption">

使用CSS

img::after {
  content: attr(alt);
}

---

是否可以使用CSS输出img的替代文字？

请指出浏览器与您提供的任何解决方案的兼容性。

Here's a jsfiddle

Answer 1

这是设计使然。

img标记是自动关闭（<tag />）标记，因此它们不包含“内容”。由于它们不包含任何内容，因此不能附加content（即::after）或前置（即::before）。

其他自动关闭的HTML元素也是如此：

  

<area>，<base>，<br>，<col>，<command>，<embed>，<hr>，<keygen> ，   <link>，<meta>，<param>，<source>，<track>和<wbr>

以下是（CSS2）规范所说的内容：

  

请注意。该规范没有完全定义交互   ：before和：after with replacement elements（例如HTML中的IMG）。这个   将在未来的规范中更详细地定义。 [2014：尚未发生]

来源： http://www.w3.org/TR/CSS2/generate.html#before-after-content