如何使用 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 替换元素（例如 HTML 中的 IMG）。这 将在未来的规范中更详细地定义。 [2014 年：尚未发生]

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