11

I have the following CSS code

.editable:before {
    content: url(../images/icons/icon1.png);
    padding-right:5px;
}

this is used in conjunction 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?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
William Calleja
  • 4,055
  • 11
  • 41
  • 51
  • I Dont know about IE8, but :before and :after are not supported in IE7 and below. Dont know if they finally added support in 8 or not. If they did make sure the page isnt rendering in IE7 emulation. – prodigitalson Mar 30 '10 at 15:07

5 Answers5

24

Actually you should be careful here and read the detail. For full details, see this link - which states

In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :before. Beginning with Windows Internet Explorer 9, the ::before pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form.

Meaning for browsers <IE9 - you must use :before and for >=IE9 - you must use ::before

Tim
  • 2,466
  • 1
  • 21
  • 18
  • 1
    seeing this saved me a bunch of time, IE8 wasn't working for me because I had :: – Sabrina Leggett Jun 21 '12 at 10:44
  • double colon was my problem, thanks for the heads up. How does one make this forward compatible? I.e. use single colon if it's less then IEX vs double colon if it's greater than IEY? – Jacques Jan 14 '13 at 13:26
  • 3
    @Jacques the single colon will work just as fine in IE>=9. So for now just stick with the single colon (which is the CSS2.1 standard). Only CSS3 differentiates between single and double colons for pseudo selectors and pseudo elements. – Robin van Baalen Jan 23 '14 at 15:51
23

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!

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
10

When using :before and :after, just be careful not to use double colons (::after - will not work, but :after will work). I lost about 20mins for this...

marinbgd
  • 739
  • 13
  • 28
  • Thank you, this is actually the answer I personally was looking for. IE8 is now a-workin' for me. (Stupid IE8!) – Phil Tune Sep 05 '13 at 13:31
  • You sir, saved me from a potentially day-long debug session why this &$(*# wouldn't work while every compatibility table says it should. – Robin van Baalen Jan 23 '14 at 15:48
  • but better to use ::before for modern browsers not sure if you can double up like close:before, close::before{etc... – landed Jun 30 '15 at 08:23
6

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.

fuxia
  • 62,923
  • 6
  • 54
  • 62
0

This is going off of Pekka's awesome example... My heights on my project was to tall for the row... So I added a padding-bottom: 0px;

Just in case you rain into this....

.icon-spinner:before {
    content: '';
    padding: 15px;
    padding-bottom: 0px;
    background: url("css.png") no-repeat left top;
}
no1uknow
  • 549
  • 1
  • 7
  • 18