带有 CSS 内容的 HTML IMG 没有 ALT 标签不可见答案

【问题标题】：HTML IMG with CSS content invisible without ALT tag带有 CSS 内容的 HTML IMG 没有 ALT 标签不可见
【发布时间】：2021-07-17 14:47:21
【问题描述】：

在 Firefox 88 中，CSS 样式的图像在没有 alt 标签时是不可见的。这是浏览器中的错误还是不正确的 HTML/CSS？

img.wikipedia {
    content:url("https://upload.wikimedia.org/wikipedia/commons/0/0c/Wikipedia%27s_W_%28Linux_Libertine_mucked_with%29.svg");
}

CSS URL with alt, visible in Firefox
<img class="wikipedia" alt="Wikipedia"> 
<br>
CSS URL without alt, invisible in Firefox
<img class="wikipedia">

【问题讨论】：

我的意思是，an img without a src attribute is invalid HTML to begin with，更不用说 alt。那么，问题是这是否是浏览器的 CSS 渲染图像中没有 alt 文本的错误。

【解决方案1】：

是的，当涉及到img 标签时，Firefox 中的内容行为与 chrome 不同。 content 适用于 ::before 和 ::after 伪元素。

要注意，带有 div 的内容可以正常工作，但使用 src 或 background 作为 img 标签。

【讨论】：