<!-- Checkout my blog post with a pure Unicode and Font Awesome 5/Line Awesome variation:
https://blog.nicohood.de/pure-css-only-html-star-rating-no-javascript -->

<ul class="rating-score" data-rating="4.5">
  <li class="rating-score-item"></li>
  <li class="rating-score-item"></li>
  <li class="rating-score-item"></li>
  <li class="rating-score-item"></li>
  <li class="rating-score-item"></li>
</ul>

<br>

<fieldset class="rating-input">
  <input type="radio" value="5" id="stars-star5" name="rating">
  <label for="stars-star5" title="5 Stars"></label>
  <input type="radio" value="4" id="stars-star4" name="rating">
  <label for="stars-star4" title="4 Stars"></label>
  <input type="radio" value="3" id="stars-star3" name="rating">
  <label for="stars-star3" title="3 Stars"></label>
  <input type="radio" value="2" id="stars-star2" name="rating">
  <label for="stars-star2" title="2 Stars"></label>
  <input type="radio" value="1" id="stars-star1" name="rating">
  <label for="stars-star1" title="1 Stars"></label>
</fieldset>

// Checkout my blog post with a pure Unicode and Font Awesome 5/Line Awesome variation:
// https://blog.nicohood.de/pure-css-only-html-star-rating-no-javascript

// Star definitions
%base-star {
  display: inline-block; 
  
  &:after {
    font-family: "FontAwesome";
    font-size: 1.5em;
    color: #FFC600;
  }
};

%full-star { 
  &:after {
    content: "\f005";    
  }
};

%half-star {
  &:after {    
    content: "\f123";
  }
};

%empty-star {
  &:after {
    content: "\f006";
  }
};

// 5 Star Rating Score
.rating-score {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0;
  padding: 0;

  > .rating-score-item {
    @extend %base-star;
    @extend %empty-star;
  }

  @for $i from 1 through 5 {
    &[data-rating='#{$i}'] {
      > .rating-score-item:nth-child(-n + #{$i}) {
        @extend %full-star;
      }
    }
  }
  
  @for $i from 0 through 4 {
    &[data-rating='#{$i + 0.5}'] {
      > .rating-score-item:nth-child(-n + #{$i}) {
        @extend %full-star;
      }

      > .rating-score-item:nth-child(#{$i + 1}) {
        @extend %half-star;
      }
    }
  }
}

// 5 Star Rating Form Field
.rating-input {
  border: none;
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin: 0;
  padding: 0;

  > input {
    display: none;
  }

  > label {
    @extend %base-star;
    @extend %empty-star;
  }

  // Selected star color
  > input:checked ~ label {
    @extend %full-star;
  }

  // On hover color all stars grey by default
  &:hover > input + label {
    @extend %empty-star;
  }

  // Hover star color
  &:hover > input + label:hover,
  &:hover > input + label:hover ~ input + label {
    @extend %full-star;
  }
}