Star Ratings With Very Little CSS

http://css-tricks.com/star-ratings/

by anmol sandal

HTML

<ul class="rating">
<li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li>
</ul>

CSS

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.rating > li {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > li:hover:before,
.rating > li:hover ~ li:before {
   content: "\2605";
   position: absolute;
}