如何使用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);
}

---

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

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

这是一个jsfiddle

Answer 1

这是设计的.

img标签是自闭(<tag />)标签,因此它们不包含"内容".由于它们不包含任何内容,因此content不能附加(即::after)或附加(即::before).

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

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

这是(CSS2)规范所说的:

注意.此规范未完全定义:替换元素(例如HTML中的IMG)之前和之后的交互.这将在未来的规范中更详细地定义.[2014:尚未发生]

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