Rating

<div class="rating">
<button class="rating__star"></button>
<button class="rating__star"></button>
<button class="rating__star"></button>
<button class="rating__star"></button>
<button class="rating__star"></button>
</div>
.rating {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
flex-direction: row-reverse;
font-size: 32px;
}
.rating__star:hover,
.rating__star:hover ~ .rating__star {
color: transparent;
}
/*
Make all previous stars selected when hover on a star
Note that we use `flex-direction: row-reverse` on the container
*/
.rating__star:hover:before,
.rating__star:hover ~ .rating__star:before {
color: #00449e;
content: '\2605';
left: 0;
position: absolute;
}
.rating__star {
/* Reset styles for button */
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;
/* Used to position the hover state */
position: relative;
}