title: Hover with star rating not working properly
body: <p>So I found the following code on codepen (<a href="https://codepen.io/anon/pen/Edzxaj" rel="nofollow noreferrer">https://codepen.io/anon/pen/Edzxaj</a>) to make a star rating, which works fine for Font Awesome 3.x and 4.x, but fails to produce the same result on 5.x when hovering over the 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>/* Base setup */
  @import url(//use.fontawesome.com/releases/v5.4.2/css/all.css);
  
  /* Ratings widget */
  .rate {
      display: inline-block;
      border: 0;
  }
  /* Hide radio */
  .rate &gt; input {
      display: none;
  }
  /* Order correctly by floating highest to the right */
  .rate &gt; label {
      float: right;
  }
  /* The star of the show */
  .rate &gt; label:before {
      display: inline-block;
      font-size: 1.1rem;
      padding: .3rem .2rem;
      margin: 0;
      cursor: pointer;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: "\f005"; /* full star */
  }
  
  /* Half star trick */
  .rate .half:before {
      content: "\f089"; /* half star no outline */
      position: absolute;
      padding-right: 0;
  }
  
  /* Click + hover color */
  input:checked ~ label, /* color current and previous stars on checked */
  label:hover, label:hover ~ label { color: #73B100;  } /* color previous stars on hover */
  
  /* Hover highlights */
  input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
  input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
  label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D;  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset class="rate"&gt;
      &lt;input type="radio" id="rating10" name="rating" value="10" /&gt;&lt;label for="rating10" title="5 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating9" name="rating" value="9" /&gt;&lt;label class="half" for="rating9" title="4 1/2 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating8" name="rating" value="8" /&gt;&lt;label for="rating8" title="4 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating7" name="rating" value="7" /&gt;&lt;label class="half" for="rating7" title="3 1/2 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating6" name="rating" value="6" /&gt;&lt;label for="rating6" title="3 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating5" name="rating" value="5" /&gt;&lt;label class="half" for="rating5" title="2 1/2 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating4" name="rating" value="4" /&gt;&lt;label for="rating4" title="2 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating3" name="rating" value="3" /&gt;&lt;label class="half" for="rating3" title="1 1/2 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating2" name="rating" value="2" /&gt;&lt;label for="rating2" title="1 star"&gt;&lt;/label&gt;
      &lt;input type="radio" id="rating1" name="rating" value="1" /&gt;&lt;label class="half" for="rating1" title="1/2 star"&gt;&lt;/label&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Using the previous version of font awesome, hovering over the second half of the star would fill the star. In 5.x you need to hover the cursor all the way to the end of the star before it gets filled (I know this sounds a bit vague, but just compare the codepen and this example to see the difference in hovering).
  Is there any way to fix this?</p>