title: Simple Rating Star CSS
body: <p>I am trying to build a simple rating system using HTML and CSS. It's a very simple rating bar which consist of 5 stars.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>fieldset,
  label {
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
  }
  
  .rating {
    border: none;
    float: left;
  }
  
  .rating&gt;input {
    display: none;
  }
  
  .rating&gt;label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
  }
  
  .rating&gt;.half:before {
    content: "\f089";
    position: absolute;
  }
  
  .rating&gt;label {
    color: #ddd;
    float: right;
  }
  
  .rating&gt;input:checked~label,
  
  /* show gold star when clicked */
  
  .rating:not(:checked)&gt;label:hover,
  
  /* hover current star */
  
  .rating:not(:checked)&gt;label:hover~label {
    color: #FFD700;
  }
  
  
  /* hover previous stars in list */
  
  .rating&gt;input:checked+label:hover,
  
  /* hover current star when changing rating */
  
  .rating&gt;input:checked~label:hover,
  .rating&gt;label:hover~input:checked~label,
  
  /* lighten current selection */
  
  .rating&gt;input:checked~label:hover~label {
    color: #FFED85;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  
  &lt;fieldset class="rating"&gt;
  
    &lt;input type="radio" id="5star" name="rating" value="5" /&gt;
    &lt;label class="full" for="star5" title="Excellent"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="4halfstar" name="rating" value="4.5" /&gt;
    &lt;label class="half" for="4halfstar" title="Good"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="4star" name="rating" value="4" /&gt;
    &lt;label class="full" for="4star" title="Pretty good"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="3halfstar" name="rating" value="3.5" /&gt;
    &lt;label class="half" for="3halfstar" title="Nice"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="3star" name="rating" value="3" /&gt;
    &lt;label class="full" for="3star" title="Ok"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="2halfstar" name="rating" value="2.5" /&gt;
    &lt;label class="half" for="2halfstar" title="Kinda bad"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="2star" name="rating" value="2" /&gt;
    &lt;label class="full" for="2star" title="Bad"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="1halfstar" name="rating" value="1.5" /&gt;
    &lt;label class="half" for="1halfstar" title="Meh"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="1star" name="rating" value="1" /&gt;
    &lt;label class="full" for="1star" title="Umm"&gt;&lt;/label&gt;
  
    &lt;input type="radio" id="halfstar" name="rating" value="0.5" /&gt;
    &lt;label class="half" for="halfstar" title="Worst"&gt;&lt;/label&gt;
  
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that I can only select the star up to 4.5 star which is half of the 5th star, what I want is to select the full 5 star. I have included an image of the rating bar below. Help is really appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/JwGJQ.jpg" rel="nofollow noreferrer">Rating bar</a></p>