showing and hiding :before and :after in IE8

It appears the :before and :after in IE8 have trouble with display. If one class gives it a display: block and without it, display: none IE8 is not a happy camper.

It starts rendering the new style slowly (a time period elapses between applying the class and it actually displaying) meanwhile the browser is not "frozen" like normal css slowdowns would make it.

And when removing the class you may not even change the visibility of the :before and :after elements even though they no longer contain any rules for display: block.

So what to do?

Set the content in the location where you wanted display: block. This will cause the element to show. Removing the class will cause the content to get unset and thus the element hides.

Yeah. Annoying