Pure Css Rating

I was looking for a pure css rating template and couldn't find anything.

Here's my solution:

HTML:

<div class="rateBar">
    <a class="r5" href="/rate/5"></a>
    <a class="r4" href="/rate/4"></a>
    <a class="r3" href="/rate/3"></a>
    <a class="r2" href="/rate/2"></a>
    <a class="r1" href="/rate/1"></a>
</div>

CSS:

.rateBar {
    margin: 30px auto;
    width:260px; height:48px;
    background-image:url("rate_off_bg.png");
}

.rateBar a       { height:48px; position: absolute; }
.rateBar a:hover { background-image:url("rate_on.png"); }

.r1 { width: 48px; }
.r2 { width:101px; }
.r3 { width:154px; }
.r4 { width:207px; }
.r5 { width:260px; }

Images:

based on: Crystal Clear (crystal_clear), license: LGPL-2.1

based on: Crystal Clear (crystal_clear), license: LGPL-2.1