I wondered after all these years (it's been like 7 years!) since I wrote that tutorial, how I would attack the same problem. In my mind, there were two failures from my previous experiments. I felt the star rating should use a radio form control (also, a progress bar might be semantically appropriate too) instead of links. Also, to keep up with the insane resolution game these days, it would need to be scalable ala SVG.
Rather than bore you with the walkthrough, I'd prefer to let you tinker with it on codepen:
You might be asking the question, why not just utf-8 encode rather than base64 encoding the SVG? Seems a fair question — my answer? Some modern browsers seem to choke on utf-8 encoded data-uri SVGs. But, if you'd like to tinker with the data-uri with utf-8 encoding, here's the codepen for that.
Also, you may have noticed that it's not only retina-proof, but it is scalable — try editing it on Codepen and changing width to 500px and height to 100px. What follows, you will witness, is nothing short of wizardry.
The Nitty Gritty
Supported in: IE9+, Firefox 10+, Safari 5+, Chrome 14+, Opera 10+, iOS6 Safari, iOS6 Chrome