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!!