Is there a faster way to give ":before" and ":after" selector support in IE7?

Question

My design currently calls for a lot of :before and :after selectors. IE7 does not support these selectors so, after a little digging, I am now using IE7.js (the IE8 version).

Whilst it does work, there is a noticeable lag (approx 15-20 seconds).

Can anyone recommend a faster alternative so that I can use the :before and :after psudo-element selectors in IE7?

see also http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-classes-hack-for-ie-7 — mnicky, Jul 04 '11 at 09:28
There really shouldn't be a *15-20 seconds* lag. Do you have a test page online? — thirtydot, Jul 04 '11 at 09:34
@mnicky That is what I am currently using. I would like to find an alternative as it is causing a lot of lag. — Richard Parnaby-King, Jul 04 '11 at 09:35
If you have *zillions* of `:before` and `:after`, the cause of the problem could be IE7's slowish JavaScript engine - if this is the case, I think **you're out of luck** - IE7.js is probably as efficient as you're going to get. Can you try to recreate the problem on [JS Bin](http://jsbin.com/)? That way we can try to spot if anything can be improved. — thirtydot, Jul 04 '11 at 09:39
@thirtydot I have a page with only one :before and :after and that is taking about 7-9 seconds, so I think you are right about it being the number of selectors I'm using. — Richard Parnaby-King, Jul 04 '11 at 09:49
IE7.js is doing a LOT in bringing the browsers up to speed, however I am only after the selectors. I am not proficient enough with js to strip out everything I do not need, but maybe someone somewhere already has? @thirtydot if you post your previous comment I shall accept as answer. — Richard Parnaby-King, Jul 04 '11 at 10:11

score 2 · Answer 1 · answered May 17 '12 at 11:38

I use this CSS hack in css:

.button {
 *zoom: expression( 
      this.runtimeStyle.zoom="1",
      this.insertBefore( document.createElement("div"), this.childNodes[0] ).className="before",
      this.appendChild( document.createElement("div") ).className="after"
     );

}

...and later simply:

.button:before, 
.button .before{
    ...
}

score 1 · Accepted Answer · answered Jul 04 '11 at 10:39

From the comments:

If you have zillions of :before and :after, the cause of the problem could be IE7's slowish JavaScript engine - if this is the case, I think you're out of luck - IE7.js is probably as efficient as you're going to get.

and:

@thirtydot I have a page with only one :before and :after and that is taking about 7-9 seconds, so I think you are right about it being the number of selectors I'm using.

IE7 :(

Is there a faster way to give ":before" and ":after" selector support in IE7?

2 Answers2