Rating No CSS - List Style

by Elijah Tate

HTML

<ul class="starRatings">
  <li><a href="productRating.html?rating=5" class="starRating excellentRating">Excellent</a></li>
  <li><a href="productRating.html?rating=4" class="starRating goodRating">Good</a></li>
  <li><a href="productRating.html?rating=3" class="starRating averageRating">Average</a></li>
  <li><a href="productRating.html?rating=2" class="starRating poorRating">Poor</a></li>
  <li><a href="productRating.html?rating=1" class="starRating terribleRating">Terrible</a></li>
</ul>

CSS

.starRatings{
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 218px;
  height: 50px;
  background: url(http://i909.photobucket.com/albums/ac298/roboyak/Stars_zpsweposc4h.jpg);
}

.starRatings li {
  position: absolute;
  left: 0;
  top: 0;
}

.starRatings .starRating{
  text-indent: 3000px;
  height: 50px;
  display: block;
  overflow: hidden;
}

.excellentRating{
  width: 218px;
}

.goodRating{width: 170px;}
.averageRating{width: 125px;}
.poorRating{width: 85px;}
.terribleRating{width: 50px;}

.starRatings a:hover {background:url(http://i909.photobucket.com/albums/ac298/roboyak/Stars_zpsweposc4h.jpg)0 -50px;}