Pure CSS star rating

by csswizardry

HTML

<span class=rating>
    <span>☆</span><!--
 --><span>☆</span><!--
 --><span>☆</span><!--
 --><span>☆</span><!--
 --><span>☆</span>
</span>

CSS

.rating > span {
  display: inline-block;
  position: relative;
}
.rating:hover > span:before{
   content: "\2605"; /* Place a solid star over all the empty stars when you hover them. */
   position: absolute;
}
.rating > span:hover ~ span:before {
   content: ""; /* Remove the solid star from any siblings after the one you’re hovering. */
}

JavaScript

/*
Harry Roberts -- @csswizardry
http://css-tricks.com/star-ratings/ — in a whole three lines less CSS!
*/