Generated by SassMeister.com.

SassMeister-input-HTML.html

<form class="stars-rating">
  <fieldset>
    <legend>Rate this product</legend>
    <input type="radio" id="star5" class="stars-rating__item-input" name="rating" value="5" />
    <label for="star5"  class="stars-rating__item-label"title="Awesome!">5 stars</label>
    <input type="radio" id="star4" class="stars-rating__item-input" name="rating" value="4" />
    <label for="star4"  class="stars-rating__item-label"title="Nice!">4 stars</label>
    <input type="radio" id="star3" class="stars-rating__item-input" name="rating" value="3" />
    <label for="star3"  class="stars-rating__item-label"title="Bof!">3 stars</label>
    <input type="radio" id="star2"  class="stars-rating__item-input"name="rating" value="2" />
    <label for="star2" class="stars-rating__item-label" title="Very bad!">2 stars</label>
    <input type="radio" id="star1"  class="stars-rating__item-input"name="rating" value="1" />
    <label for="star1" class="stars-rating__item-label" title="It sucks!">1 stars</label>
  </fieldset>
</form>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----


$star-color: #DDD;
$star-color__is-active: #ffa62c;
%visuallyhidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.stars-rating__item-input {
  @extend %visuallyhidden;
}
.stars-rating__item-label {
    display:block;
    float:left;
    cursor:pointer;
    font-size:200%;
    color:$star-color;
    position:relative;
    overflow:hidden;
    visibility: hidden;
  &:after {
    content: "★";
    position:absolute;
    left:0;
    visibility: visible;
  }
}

SassMeister-output.css

@charset "UTF-8";
.stars-rating__item-input {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.stars-rating__item-label {
  display: block;
  float: left;
  cursor: pointer;
  font-size: 200%;
  color: #dddddd;
  position: relative;
  overflow: hidden;
  visibility: hidden;
}
.stars-rating__item-label:after {
  content: "★";
  position: absolute;
  left: 0;
  visibility: visible;
}

SassMeister-rendered.html

<form class="stars-rating">
  <fieldset>
    <legend>Rate this product</legend>
    <input type="radio" id="star5" class="stars-rating__item-input" name="rating" value="5" />
    <label for="star5"  class="stars-rating__item-label"title="Awesome!">5 stars</label>
    <input type="radio" id="star4" class="stars-rating__item-input" name="rating" value="4" />
    <label for="star4"  class="stars-rating__item-label"title="Nice!">4 stars</label>
    <input type="radio" id="star3" class="stars-rating__item-input" name="rating" value="3" />
    <label for="star3"  class="stars-rating__item-label"title="Bof!">3 stars</label>
    <input type="radio" id="star2"  class="stars-rating__item-input"name="rating" value="2" />
    <label for="star2" class="stars-rating__item-label" title="Very bad!">2 stars</label>
    <input type="radio" id="star1"  class="stars-rating__item-input"name="rating" value="1" />
    <label for="star1" class="stars-rating__item-label" title="It sucks!">1 stars</label>
  </fieldset>
</form>