<div class="rating">

  <input type="radio" id="star-1" name="rating" value="1">
  <label for="star-1" title="Оценка «1»"></label>

  <input type="radio" id="star-2" name="rating" value="2">
  <label for="star-2" title="Оценка «2»"></label>    
  
  <input type="radio" id="star-3" name="rating" value="3">
  <label for="star-3" title="Оценка «3»"></label>  
  
  <input type="radio" id="star-4" name="rating" value="4">
  <label for="star-4" title="Оценка «4»"></label>  
  
  <input type="radio" id="star-5" name="rating" value="5">
  <label for="star-5" title="Оценка «5»"></label> 

</div>

.rating {
  width: 200px;
  height: 40px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}
.rating:not(:checked) > input {
  display: none;
}
.rating:not(:checked) > label {

  width: 40px;
  cursor: pointer;
  font-size: 40px;
  color: lightgrey;
  text-align: center;
  line-height: 1;
}
.rating:not(:checked) > label:before {
  content: '★';
}
.rating > input:checked ~ label {
  color: gold;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: gold;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
  color: gold;
}