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

Question

so I've been toying with this calendar-ish thingy for a bit:

• Grid of divs (mimicking a table)
• Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements
• Icons change colour depending on colour of cell hovered and that of its previous sibling (cell's colour class is applied to the icon).

Stripped down fiddle: http://jsfiddle.net/e9PkA/1/

This works fine in every browser but IE8 and below (IE lte 7 and I will never friends, but IE8 would be nice to have).

IE8 notices the change of classNames and updates the divs' colour accordingly but completely ignores the colour changes implied by the :before and :after declarations, e.g.:

.wbscal_icon_arrival:before {
    width: 12px;
    height: 4px;

    left: -8px;
    top: 6px;
    background-color: silver;
}

.wbscal_icon_arrival.wbscal_full:before {
    background-color: #ff0000 !important; 
}

In the fiddle above, the :before/:after elements are coloured exactly once: the first time the tooltip is shown.

In another version it would update everytime I'd move the mouse out of the "table" div, but not if the tooltip is hidden when hovering a "cell" div border.

I've tried force-triggering repaints by adding/removing other classes to/from the element/its parents/the body, editing/accessing style attributes and whatnot so I guess it's not your average repaint problem.

Is there a JS hack that fixes this and forces :before/:after to update?

Answer 1

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!