Replace text by graphic without extra markup

Here is a little trick for you, to replace text by a graphic through pure CSS without the need to add extra markup:

SELECTOR
{
  text-indent: -99em;
  line-height: 0;
}
SELECTOR:after
{
  display: block;
  text-indent: 0;
  content: REPLACEMENT;
}

SELECTOR can be any valid CSS-selector. REPLACEMENT references the graphic, which should replace the text. This can be a SVG-graphic, a vector-graphics from a font, any bitmap graphic or (quiet useless, but a simple case to understand the source like in the first of my two examples) other text. SVG- and bitmap-graphics are simply referred by an url in the content-directive, like I have done it with a data-url in my second example. For the case of an icon embedded in a vector you simply put the character-code of the icon in the content-directive, like described in the according ALA-article.

Examples

1. Example 1
2. Example 2

What is it good for?

If you need backward compatibility for Internet Explorer 8 and below or Android 2.3 and below, you have to use icon-fonts to support these old browsers. I use this often, if I have a brand logo, that should be inserted in a accessible way and do not want to bloat up the html-markup with useless tag’s, to achieve this.