How can I get IE8 to accept a CSS :before tag?

css internet-explorer-8 pseudo-element css-content
William Calleja picture William Calleja · Mar 30, 2010 · Viewed 49.8k times · Source

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?

Answer

Tim picture Tim · Apr 17, 2012

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

Related questions

Should I use single or double colon notation for pseudo-elements?

Since IE7 and IE8 don't support the double-colon notation for pseudo-elements (e.g. ::after or ::first-letter), and since modern browsers support the single-colon notation (e.g. :after) for backwards compatibility, should I use solely the single-colon notation and when IE8…

Read More
Forcing IE8 to rerender/repaint :before/:after pseudo elements

so I've been toying with this calendar-ish thingy for a bit: Grid of divs (mimicking a table) Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements Icons change colour …

Read More
z-index IE8 bug on generated content with :after

This is a known error in IE8, look at the last bug here: http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html Now, playing a bit with a simple example I found this (test it using IE8): http://jsfiddle.net/AjCPM/ <…

Read More