<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.