HTML radio buttons as stars

HTML

<div class="radio-buttons-container radio-buttons-demo">

<input type="radio" id="rb_demo_star_5" name="rating" value="5" />
<label for="rb_demo_star_5"></label>

<input type="radio" id="rb_demo_star_4.5" name="rating" value="4.5" />
<label for="rb_demo_star_4.5" class="half"></label>

<input type="radio" id="rb_demo_star_4" name="rating" value="4" />
<label for="rb_demo_star_4"></label>

<input type="radio" id="rb_demo_star_3.5" name="rating" value="3.5" />
<label for="rb_demo_star_3.5" class="half"></label>

<input type="radio" id="rb_demo_star_3" name="rating" value="3" />
<label for="rb_demo_star_3"></label>

<input type="radio" id="rb_demo_star_2.5" name="rating" value="2.5" />
<label for="rb_demo_star_2.5" class="half"></label>

<input type="radio" id="rb_demo_star_2" name="rating" value="2" />
<label for="rb_demo_star_2"></label>

<input type="radio" id="rb_demo_star_1.5" name="rating" value="1.5" />
<label for="rb_demo_star_1.5" class="half"></label>

<input type="radio" id="rb_demo_star_1" name="rating" value="1" />
<label for="rb_demo_star_1"></label>

<input type="radio" id="rb_demo_star_0.5" name="rating" value="0.5" />
<label for="rb_demo_star_0.5" class="half"></label>

</div>

CSS

.radio-buttons-container > input {
  display: none;
}

.radio-buttons-container > label {
  float: right;
}

.radio-buttons-container > label:before {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 1.2rem;
  padding: 0.3rem 0.2rem;
  margin: 0;
  cursor: pointer;
  content: "\f005 ";
}

.radio-buttons-container .half:before {
  position: absolute;
  content: "\f089 ";
  padding-right: 0;
}

input:checked ~ label,
label:hover,
label:hover ~ label {
  color: #f0d102;
}

input:checked + label:hover,
input:checked ~ label:hover,
input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~ label {
  color: #f4ee28;
}

.radio-buttons-demo > label:before {
  font-size: 2.2rem;
  padding: 0.4rem 0.3rem;
}