Use the ::before and ::after pseudo-elements to style broken images. If an image is loaded, these elements won’t be displayed. But if your image can’t be loaded, then these are displayed and you can get creative with them.
.broken:before {
content: "🔗 Image is broken...";
}
.broken:after {
content: "(" attr(src) ")";
}Copied to clipboard!
If you inspect the two image elements above, both have a ::before and ::after element, but notice they are only shown if the image itself is broken.
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
