<h1>Rate this code</h1>
<p class="counterW">score: <span class="scoreNow">3</span> out of <span>5</span></p>
<ul class="ratingW">
  <li class="on"><a href="javascript:void(0);"><div class="star"></div></a></li>
  <li class="on"><a href="javascript:void(0);"><div class="star"></div></a></li>
  <li class="on"><a href="javascript:void(0);"><div class="star"></div></a></li>
  <li><a href="javascript:void(0);"><div class="star"></div></a></li>
  <li><a href="javascript:void(0);"><div class="star"></div></a></li>
</ul>
h1 {margin:60px 0 0 60px;}
.counterW {margin:0 0 0 60px;}
.ratingW {position:relative; margin:10px 0 0;}
.ratingW li {display:inline-block; margin:0px;}
.ratingW li a {display:block; position:relative; /*margin:0 3px;  width:28px; height:27px;color:#ccc; background:url('../img/ico/icoStarOff.png') no-repeat; background-size:100%;*/}
/*.ratingW li.on a {background:url('../img/ico/icoStarOn.png') no-repeat; background-size:100%;}*/

.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .9em;
  margin-right: .9em;
  margin-bottom: 1.2em;
  border-right: .3em solid transparent;
  border-bottom: .7em  solid #ddd;
  border-left: .3em solid transparent;
  /* Controlls the size of the stars. */
  font-size: 24px;
}
.star:before, .star:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: .6em;
  left: -1em;
  border-right: 1em solid transparent;
  border-bottom: .7em  solid #ddd;
  border-left: 1em solid transparent;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}
.star:after {
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}


.ratingW li.on .star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .9em;
  margin-right: .9em;
  margin-bottom: 1.2em;
  border-right: .3em solid transparent;
  border-bottom: .7em  solid #FC0;
  border-left: .3em solid transparent;
  /* Controlls the size of the stars. */
  font-size: 24px;
}
.ratingW li.on .star:before, .ratingW li.on .star:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: .6em;
  left: -1em;
  border-right: 1em solid transparent;
  border-bottom: .7em  solid #FC0;
  border-left: 1em solid transparent;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}
.ratingW li.on .star:after {
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}
function ratingStar(star){
	star.click(function(){
		var stars = $('.ratingW').find('li')
		stars.removeClass('on');
		var thisIndex = $(this).parents('li').index();
		for(var i=0; i <= thisIndex; i++){
			stars.eq(i).addClass('on');
		}
    putScoreNow(thisIndex+1);
	});
}

function putScoreNow(i){
  $('.scoreNow').html(i);
}


$(function(){
	if($('.ratingW').length > 0){
			ratingStar($('.ratingW li a'));
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js