<div class="rating-group" role="group" aria-label="Rating">
  <input type="radio" id="s5" name="rating" value="5" hidden />
  <label for="s5" class="star" aria-label="5 stars">★</label>
  <input type="radio" id="s4" name="rating" value="4" hidden />
  <label for="s4" class="star" aria-label="4 stars">★</label>
  <input type="radio" id="s3" name="rating" value="3" hidden />
  <label for="s3" class="star" aria-label="3 stars">★</label>
  <input type="radio" id="s2" name="rating" value="2" hidden />
  <label for="s2" class="star" aria-label="2 stars">★</label>
  <input type="radio" id="s1" name="rating" value="1" hidden />
  <label for="s1" class="star" aria-label="1 star">★</label>
</div>

<style>
.rating-group { display: flex; flex-direction: row-reverse; gap: 0.25rem; width: fit-content; }
.star {
  font-size: 2rem; color: var(--border); cursor: pointer;
  transition: color 0.15s; line-height: 1;
}
.rating-group:hover .star { color: #F59E0B; }
.star:hover ~ .star { color: #F59E0B; }
.star:hover { color: #F59E0B; }
input[type="radio"]:checked ~ label { color: #F59E0B; }
</style>