Pure HTML & CSS Star Rating Widget

Simple Pure CSS Rating widget for your web application and web page. In this, we don't use any JS code here only HTML and CSS. And we use the FontAwsome for Star. Other than we do not use any plugin JS and CSS.

HTML:

<div class="ratethis">
    <input type="radio" id="star5" name="ratethis" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="ratethis" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="ratethis" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="ratethis" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="ratethis" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="ratethis" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="ratethis" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="ratethis" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="ratethis" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="ratethis" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</div>

CSS:

@import url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.ratethis { 
  border: none;
  float: left;
}
.ratethis > input { display: none; } 
.ratethis > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.ratethis > .half:before { 
  content: "\f089";
  position: absolute;
}
.ratethis > label { 
  color: #ddd; 
 float: right; 
}
.ratethis > input:checked ~ label, 
.ratethis:not(:checked) > label:hover, 
.ratethis:not(:checked) > label:hover ~ label {color: #FFD700;} 

.ratethis > input:checked + label:hover, 
.ratethis > input:checked ~ label:hover,
.ratethis > label:hover ~ input:checked ~ label, 
.ratethis > input:checked ~ label:hover ~ label {color: #FFED85;}

OUTPUT