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)";
}
}
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 */
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.