（あまり役立たない）IE8で擬似要素の背景を動的に切り替えられない場合

html 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title></title>
<style>
#box{width:200px;height:200px;background:#eee;}
#box:before{content:"before box";color:#fff;display:block;background:#aaa;width:100px;height:100px;}
#box.change:before{background:#ccc}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
	$("#chengeBeforeBox").click(function(){
		$("#box").toggleClass("change");
	});
})
</script>
<!---->
</head>
<body>
<div id="box">box</div><a id="chengeBeforeBox" href="#">chengeBeforeBox</a>
</body>
</html>

#chengeBeforeBoxをクリックすると:beforeボックスの背景色が#aaaから#cccになる記述。

しかしIE8では背景色が変化しない。
contentプロパティに変化がない場合には背景の変化が反映されない様子。
contentの中身を少し変えるだけで反映されるようになる。
この場合もとの文字列に半角スペース加えるだけでもよかった。

以下に詳しくまとまっていた
http://terkel.jp/archives/2013/07/redraw-pseudo-element-style-ie8/