Display image alt text in when printing

Question

I would like to display image alt text instead of image when printing the webpage. I tried this but it doesn't work, probably because img doesn't have a closing tag so the pseudo-elements doesn't work with img. Is there a way to do this?

@media print {
       img::after {
       content: "attr(alt)";
       }
}

Answer 1

Your code is not working because you are assigning ::after to img.

img can't have a child. So you can not set ::after ::before to it.

you can do this:

index.html:

<div data-alt="some-text-in-here">
    <img src="url" alt="some-text-in-here">
</div>

style.css:

@media print {
    div {
        position: relative;
    }

    div::after {
        content: attr(data-alt);

        position: absolute;
        top: 0;
        left: 0;
        /* more styles */
     }

}