<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer">

<script src="https://kit.fontawesome.com/2de33adb02.js" crossorigin="anonymous"></script>

<div class="fichas--star">
  <div class="calificacion__star">
    <div class="icon--star">
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
      <i class="fa-regular fa-star fa-star-o"></i>
    </div>
  </div>
</div>

body {
  background: #000;
}
.icon--star {
  position: relative;
  width: 100%;
}

.fichas--star .calificacion__star .icon--star {
  display: block;
  direction: rtl;
  width: 100%;
  margin-top: 0;
}

.fichas--star .calificacion__star .icon--star i {
  color: #f5f509;
  font-size: 39.5px;
  padding-right: 0.1875em;
}
.fichas--star .calificacion__star .icon--star:hover i,
.fichas--star .calificacion__star .icon--star:hover i::before {
  cursor: pointer;
  color: #c0c0c0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f005";
}

.fichas--star .calificacion__star .icon--star i:hover,
.fichas--star .calificacion__star .icon--star:hover i:hover::before {
  cursor: pointer;
  color: #f5f509;
}
.fichas--star .calificacion__star .icon--star i:hover ~ i,
.fichas--star .calificacion__star .icon--star:hover i:hover ~ i::before {
  color: #f5f509;
}

.fa-star-o {
  overflow: clip;
}

.fa-star-o:nth-child(10) {
  color: #e2943a;
  position: absolute;
  left: 20px;
  z-index: 30;
}

.fa-star-o:nth-child(9) {
  color: #e2943a;
  position: absolute;
  left: 39px;
  z-index: 40;
  width: 25px;
}

.fa-star-o:nth-child(8) {
  color: #e2943a;
  position: absolute;
  left: 70px;
  z-index: 30;
}

.fa-star-o:nth-child(7) {
  color: #e2943a;
  position: absolute;
  left: 90px;
  z-index: 40;
  width: 25px;
}

.fa-star-o:nth-child(6) {
  color: #e2943a;
  position: absolute;
  left: 115px;
  z-index: 30;
}

.fa-star-o:nth-child(5) {
  color: #e2943a;
  position: absolute;
  left: 135px;
  z-index: 40;
  width: 25px;
}

.fa-star-o:nth-child(4) {
  color: #e2943a;
  position: absolute;
  left: 165px;
  z-index: 30;
}

.fa-star-o:nth-child(3) {
  color: #e2943a;
  position: absolute;
  left: 185px;
  z-index: 40;
  width: 25px;
}

.fa-star-o:nth-child(2) {
  color: #e2943a;
  position: absolute;
  left: 215px;
  z-index: 30;
}

.fa-star-o:nth-child(1) {
  color: #e2943a;
  position: absolute;
  left: 235px;
  z-index: 40;
  width: 25px;
}

/* 

forum question answer only

https://www.sitepoint.com/community/t/fill-half-voting-star/405726


*/