HTML IMG with CSS content invisible without ALT tag

180 Views Asked by At

In Firefox 88, CSS-styled images are invisible when they don't have an alt tag. Is that a bug in the browser or is that incorrect 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">

enter image description here

1

There are 1 best solutions below

0
Anuj Sharma On

Yes, content behavior in firefox is different than that of chrome when it comes to img tag. content works fine with ::before and ::after pseudo elements which it is intended for.

To note, content with div works fine but use src or background for the img tag.