Updating :before psuedoselector with jQuery

by Brett DeWoody

HTML

<div class="review-rate" data-toggle="review" data-value="3.5" data-width="50" data-count="17"></div>

CSS

.review-rate {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==);
	background-repeat: repeat-x;
	width: 100px;
	height: 18px;
}
.review-rate::before {
	content: "";
	display: block;
	width: attr(data-width);
	height: 18px;
	width: 55%;
	background-image:...

JavaScript

setInterval(function(){
    var newRating = Math.random()*100;
    if ($('head style[data-class="review-rate"]').length) {
        $('head style[data-class="review-rate"]').replaceWith('<style data-class="review-rate">.review-rate:before{width:' + newRating + '%}</style>')       
    } else {
        $('head').append('<style data-class="review-rate">.review-rate:before{width:' + newRating + '%}</style>');
    }
}, 1000);