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

Been trying to figure out the same thing. Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content. So I've modified your example here (just CSS): http://jsfiddle.net/lnrb0b/VWhv9/. I've added width:0 and overflow:hidden to the pseudo elements and then added content:"x" to each colour option where x is an incrementing number of spaces.

It works for me; hope it helps you!

Adding content:"x" to each declaration of the psuedo-elements and incrementing the number of spaces for each different state of the element DEFINITELY FIX the issue.

Basically, the idea is to tell IE8 that the content is slightly different in each state, so redraw the content for each state. So, if the content is the same, we 'fake' it with empty spaces. BRILLIANT!!

@lnrbob really nice answer!!

i had the problem that i used the before and after pseudos of a checkbox input, which are using some parent attributes for displaying their content (due to being easily able to implement translation there).

so they look like:

input:before {    content: "" attr(data-on) "";}input:after {    content: "" attr(data-off) "";}

and the markup looks like this:

<div class="switch off" data-on="It is ON" data-off="It is OFF">    <input id="switch" name="switch" type="checkbox" class="off"></div>

and the modification i do in jquery looks like this:

var mSwitch = $('div.switch'),    on = $.trim(mSwitch.attr('data-on')),    off = $.trim(mSwitch.attr('data-off'));// remove any spaces due to trimmSwitch .attr('data-on', on);// add a spacemSwitch .attr('data-on', on + ' ');mSwitch .attr('data-off', off);mSwitch .attr('data-off', off + ' ');

and i call this modification after setting/removing classes to change the style of the "checkbox" which is rather a switch button in this case :D

so this way you do not get a stackoverflow from too much space characters if some hardcore testers auto click the input for an infinite time ;)

like that:

<div class="switch on" data-on="ON" data-off="OFF                                                                                                                                                                                                                                                 ">