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.

possible duplicate of [How do you work around IE not supporting :after?](http://stackoverflow.com/questions/813419/how-do-you-work-around-ie-not-supporting-after) — Pekka, Aug 23 '11 at 07:38

score 18 · Answer 1 · edited Nov 21 '12 at 16:30

18

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

edited Nov 21 '12 at 16:30

Jasdeep Khalsa

6,740
8
38
58

answered Jul 20 '12 at 10:28

Paddy O'Hanlon

181
1
4

This is an amazing solution… I was able to use this to make the [JIR CSS Text Replacement](http://alicious.com/new-css-image-replacement-jir/) work in IE7 (pre-`:before` support). – thirdender Jan 26 '13 at 21:23
Fantastic solution! I wanted to add red asterisks to my form labels, so I amended it as follows for IE7. Works great. Thanks Paddy: form label.required { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '*'); } form label.required span { font-size: 16px; color: #ff0000; } – sixtysticks Apr 24 '13 at 11:24
+1 for this solution. It worked like a charm for me. Really annoying that I had to add all these gross classes to my CSS, but this definitely worked. Thanks again. – sma May 23 '13 at 21:24

score 2 · Accepted Answer · answered Aug 23 '11 at 07:42

2

Nope, IE7 does not support it

Only chance is to use Javascript/Jquery.

answered Aug 23 '11 at 07:42

Nicolas Modrzyk

13,961
2
36
40

too bad I not able to use javascript in my situation – sams5817 Aug 24 '11 at 03:02

score 0 · Answer 3 · answered Sep 04 '12 at 07:43

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

John Slegers · Answer 4 · 2014-03-25T22:52:45.513

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 = '&#xf000;');
}

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

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

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.

Can CSS Content Property work in IE7?

4 Answers4

Linked