Can CSS Content Property work in IE7?

Question

I came across with CSS content property, which it is able to add text into element.

for example:

.class:after{
   content: "testing";
}

Unfortunately this CSS property only working in IE8 only with !DOCTYPE is defined.

Is there anyway or workaround that we can make this to be working in IE7 too? without using JavaScript or jQuery.

Answer 1

If your content is not intented to change at runtime, you could use the following :

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}

If your content is intended to change at runtime, you could do something like this :

.icon-glass {
  *top:expression(0, this.innerHTML = '');
}

Unfortunately, this is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.

Answer 2

Nope, IE7 does not support it

Only chance is to use Javascript/Jquery.

Answer 3

I'm using this solution, which doesn't require js.

.whatever {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'my content');
}

Don't add a pseudo element, :before or :after. Also regular html entities can be used and html hex entities; they seem to be required for some characters, e.g. forward slash, /

Credit to font awesome for this solution: http://fortawesome.github.com/Font-Awesome/. I'm not sure if they developed the technique, but it's where I first saw it.

To target IE7 only I used Paul Irish's technique for conditional IE comments: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

So it becomes:

.lt-ie8 .whatever {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'my content');
}

Answer 4

You can use a CSS expression to add an element after your targeted element, and then use another CSS expression to add content to the new element, like this:

.class {zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i")).className="ie-after" );}

.class .ie-after {zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = 'testing');}​