制作途中でちょっとハマったことがありましたので、メモを兼ねて共有です。
通常jQueryで要素にアクセスする場合は下記のような方法で出来ます。

<html>
	<head>
		<title>通常のアクセス方法</title>
		<link rel="stylesheet" href="style.css">
		<script src="//code.jquery.com/jquery-latest.min.js"></script>
	</head>
	<body>
		<div id="hoge"></div>
		<input type="button" id="btn" value="click">
		<script src="script.js"></script>
	</body>
</html>
#hoge{
	width:160px;
	height:90px;
	color:white;
	background:red;
	...
}
$(function(){
	$('#btn').click(function(e){
		$('#hoge').css('color','blue');
	});
});

しかし:before:afterのような擬似クラスは非DOMの為、
この方法ではアクセスできません…。

そこで調べてみると動的にStyleタグを生成して書き換えると上手くいくみたいなので、
その方法を試してみました。

<html>
	<head>
		<title>動的にStyleタグを生成して書き換える方法</title>
		<link rel="stylesheet" href="style.css">
		<style id="foo" type="text/css"></style>
		<script src="//code.jquery.com/jquery-latest.min.js"></script>
	</head>
	<body>
		<div>
			AB<span id="hoge">CD</span>F
		</div>
		<input type="button" id="btn" value="click">
		<script src='script.js'></script>
	</body>
</html>
#hoge:after{
	content:"E";
}
$(function(){
	var cssTemplate = '<style type="text/css">#hoge:after{color:#[color_code];}</style>';
	$('#btn').on('click',function(e){
		var css = cssTemplate.replace('#[color_code]','red');
		$('#foo').replaceWith($(css));
	});
});

これでやりたいことが実現できました!
というわけで擬似要素はアクセス出来ないことはないが、ちょっと扱い方が特殊で手こずりました。
今後もWEBフォントなどで更に擬似要素に触れる機会が増えそうなので参考になればと思って書きました。