I have the following CSS code
.editable:before {
content: url(../images/icons/icon1.png);
padding-right:5px;
}
this is used in conjuntion with the following markup:
<span class="editable"></span>
In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn't the :before pseudo-element CSS2? isn't content: also a CSS2 command? what gives?
Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode.
IE8 supports :before, but not and also images as content when not in compatibility mode. Kudos to @toscho for testing!
How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!
You may use the image as background for the generated content:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Generated content with an image</title>
<style>
p:before
{
content: '';
padding: 20px;
background: url("css.png") center center no-repeat;
}
</style>
<p>Test</p>
Works in IE 8, Opera and Mozilla. Live-Demo.