I'm trying to replace <img> elements with emoticons with different images through CSS (so that I can match them to the style being used). I thought that I can just insert another smiley with the :before CSS pseudo-element, and hide the original element. This would work, except that the browsers don't seem to insert the extra image! This only happens if I try it with an <img> element, works perfectly when I try it with <span>. The code I tried:
<!doctype html>
<style>
img.icon:before {
display: inline-block;
content: url(smiley.png);
width: 16px;
height: 16px;
}
</style>
<p>Lorem ipsum <img src="smiley.png" class="icon" alt=":)"> dolor sit amet...</p>
The specification at http://www.w3.org/TR/CSS2/generate.html#before-after-content has a note at the bottom:
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
We are using a background image, like it is suggested in the comments, but that has the problem that the images won't print with default printing settings then. The next option we are considering is using <span class="icon"><img ...></span> and putting the :before on the span, but it's a little ugly.
I also wonder if this is specified in CSS3 so that there is a chance for fixing it in the near future.