Верстка рейтинга в виде звезд - Snipp.ru

Верстка рейтинга в виде звезд - https://snipp.ru/html-css/rating-css#tag-11878

HTML

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

CSS

body {
	font-size:14px;
	padding: 15px 20px;
	text-align: center;
}
.rating-area div{
	overflow: hidden;
	width: 265px;
	margin: 0 auto;
}
.rating-area div:not(:checked) > input {
	display: none;
}
.rating-area div:not(:checked) > label {
	float: right;
	width: 42px;
	padding: 0;
	cursor: pointer;
	font-size: 32px;
	line-height: 32px;
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-area div:not(:checked) > label:before {
	content: '★';
}
.rating-area div > input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px #c60;
}
.rating-area div:not(:checked) > label:hover,
.rating-area div:not(:checked) > label:hover ~ label {
	color: gold;
}
.rating-area div > input:checked + label:hover,
.rating-area div > input:checked + label:hover ~ label,
.rating-area div > input:checked ~ label:hover,
.rating-area div > input:checked ~ label:hover ~ label,
.rating-area div > label:hover ~ input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px goldenrod;
}
.rate-area div > label:active {
	position: relative;
}