Alternative text for CSS generated content

Great find by Stefan Judis:

Today I learned that the content property supports a way to define alternative text for generated content.

You can specify the alternative content after a /:

.new::before {
 content: url(./img/star.png) / "New!";
}

Here’s how that works with screen readers:

.new-item::before {
  /* "black star" and element content is read out */
  content: "★";

  /* "Highlighted item" and element content is read out */
  content: "★" / "Highlighted item";

  /* Generated content is ignored and only element content is read out */
  content: "★" / "";
}

Doesn’t work in Safari nor Firefox at the time of writing though.

The CSS “content” property accepts alternative text →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.