I have a star rating system that build with HTML and CSS only, in left to right it's Work fine, but in Right to left it's still in Left to right, I want the first star from right filled first and the last one (5) filled recent How can I make the star direction from right to left filled.
.rate {
display: flex;
height: 46px;
padding: 0 10px;
}
.rate:not(:checked)>input {
position: absolute;
top: -9999px;
visibility: hidden;
}
.rate:not(:checked)>label {
float: right;
width: 1em;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
font-size: 30px;
color: #ccc;
}
.rate:not(:checked)>label:before {
content: '★ ';
}
.rate>input:checked~label {
color: #ffc700;
}
.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
color: #deb217;
}
<div class="rate" onclick="validate()">
<input type="radio" id="star5" class="star" name="rate" value="5" />
<label for="star5">5 stars</label>
<input type="radio" id="star4" class="star" name="rate" value="4" />
<label for="star4">4 stars</label>
<input type="radio" id="star3" class="star" name="rate" value="3" />
<label for="star3">3 stars</label>
<input type="radio" id="star2" class="star" name="rate" value="2" />
<label for="star2">2 stars</label>
<input type="radio" id="star1" class="star" name="rate" value="1" />
<label for="star1">1 star</label>