How to style your alt text

Every day is a school day. I'd recently seen a post about highlighting images without alt text. That got me thinking. Is it possible to style alt text?

Yes. Yes it is. And it's pretty simple. Well, OK, it's CSS, so simple is a relative term!

Let's take a broken image like <img src="http://example.com/bigfoot.jpg" alt="The best quality photo of bigfoot!" />

There are two slightly different ways to style the text.

The simplest way is to give the image some CSS relating to its font, colour, and background.

 CSSimg {

    font-family: monospace;

    color: #000;

    background: yellow;

}

If the image loads, the CSS has no effect (well, you might see the background colour if the image loads slowly or if it is transparent). But if the image fails, the alt text picks up the font and text colour specified. That seems to work reliably on Firefox, Chrome, and WebKit.

With Firefox, however, you can go a little further. The alt text of a missing image is appended to the DOM as a ::before pseudo element. Which means it can be styled directly.

 CSSimg::before {

    font-family: monospace;

    color: #000;

    border: .25em dotted red;

    background: yellow;

    padding: .25em;

}

You can go as ridiculous as you like. It will only show up when an image fails to load. Sadly, that does seem to be FF specific. I couldn't get it working in Chrome or Safari.

There's one more thing you can do. You can append text to the end of your alt. For example:

 CSSimg::after {

    content: " Image did not load.";

}

Demo

 CSSimg {

    font-family: monospace;

    color: #000;

    background: yellow;

    box-shadow:inset 0px 0px 0px 1px #f00;

}

img::before {

    font-family: monospace;

    color: #000;

    border: .25em dotted #f00;

    background: #ff0;

    padding: .25em;

}

img::after {

    content: " ❌";

}

Cross Platform Compatibility

I've tested in on the three major browser rendering engines:

	::before	::after	img
Firefox	✅	✅	✅
Chrome	❌	✅	✅
Safari	❌	❌	✅

Do note that Safari will only display the alt text if the image is large enough to contain it.

Should I use this?

That's kinda up to you, sport. I think it's an interesting way to make it obvious that an image has broken. If you do use it, please make sure that the alt text is as legible as possible.