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

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');
}