How to replace HTML text with images using CSS content cross browser

Question

So I have a navigation menu that is generated by my CMS:

The menu's HTML is straightforward (edited for clarity):

 <ul>
     <li><a href="...">Journal</a></li>
     <li><a href="...">Art</a></li>
     <li><a href="...">Work</a></li>
   </ul>

I want the items to show up as hand-written text, in keeping with the general theme of the site, using separate PNG files for each menu item.

To do that, I used the CSS content property like so:

#headerNav .nav li a[href="/_site/en/journal/"]  
 { content: url(/path/to/image.png); }

And it worked great! The HTML text of each item was replaced by the correct image:

However, alas, then I learned not every browser supports the content property on selectors other than :before and :after! Chrome and Safari do it, but Firefox doesn. However when I use :before, the HTML node isn't replaced, but the image is added:

How do I work around this?

What didn't work:

• Making the <a> element display: none removed the :before part as well.
• Making the <a> element position: absolute and moving it elsewhere won't work either.
• Making the <a> element width: 0px screws up the layout because the images added through content aren't in the document flow.

What I don't want to do:

• Of course I can output the images by hand but I want to work with the HTML the CMS is giving me, which is <li>s with text in them.

• Any solution involving background-image would require me to specify each item's width and height in the style sheet, which I would like to avoid for the purposes of this question.

• Turning the handwriting into a font is not an option.

• Using JavaScript to replace the items on the fly is not an option. This needs to work using pure HTML and CSS.

Answer 1

Since you are doing this into a navigation bar you should have a fixed height making the next method possible to work:

• First insert the image as content on the :before element and make it display:block to push the actual text of the a tag below.

  li a:before {
     content:url(http://design.jchar.com/font/h_1.gif);
     display:block;
  }
  

• Then hide that text with a fixed height on your a tag:

  li a{
     height:50px;
     overflow:hidden;
  }
  

The Working Demo

Answer 2

Answer was answered before OP added the line

Any solution involving background-image would require me to specify each item's width and height in the style sheet, which I would like to avoid for the purposes of this question.

So if anyone interested in background-image solution can refer this, else can simply skip.

---

Am not sure how optimum solution I am suggesting is, but surely you can use background-image for each a element, using nth- pseudo, and set the fonts color to transparent, or use text-indent property with overflow: hidden;

So it will be something like

nav ul li {
   display: inline-block;
}

nav ul li:nth-of-type(1) a {
   background-image: url(#);
   display: block;
   width: /* Whatever */ ;
   color: transparent;
   text-indent: -9999px; /* Optional */
   overflow: hidden;
   font-size: 0; /* Optional, some people are really sarcastic for this */

   /* Below properties will be applicable if you are going for sprite methods */
   background-position: /* Depends */ ;
   background-size: /* If required */ ;
}

---

The reason why I would suggest you is :-

Advantages :

• Cross browser compatible
• Can you sprite methods to cut down http requests to request image for each tab
• Also, you are not losing the text which is between the a tags, which is really good as far as screen readers are concerned.

Disadvantages :

• Set custom width for each

---

Note: If you are going for a sprite solution, than background-position is anyways a must property to be used, so be sure you check out the support table first, before opting the sprite method.

^{Credits - For support table}

Answer 3

I would put PNG images into img tag and then set alt attribute.

<ul>
<li><a href="..." title="Journal"><img src="journal.png" alt="Journal"/></a></li>
<li><a href="..." title="Art"><img src="art.png" alt="Art"/></a></li>
<li><a href="..." title="Work"><img src="work.png" alt="Work"/></a></li>
</ul>