<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;
direction: rtl;
}
.fichas--star .calificacion__star .icon--star i {
color: #f5f509;
font-size: 39px;
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,
.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;
color: #e2943a;
position: absolute;
z-index: 30;
}
.fa-star-o:nth-child(10) {
left: 20px;
}
.fa-star-o:nth-child(9) {
left: 39px;
}
.fa-star-o:nth-child(8) {
left: 70px;
}
.fa-star-o:nth-child(7) {
left: 90px;
}
.fa-star-o:nth-child(6) {
left: 115px;
}
.fa-star-o:nth-child(5) {
left: 135px;
}
.fa-star-o:nth-child(4) {
left: 165px;
}
.fa-star-o:nth-child(3) {
left: 185px;
}
.fa-star-o:nth-child(2) {
left: 215px;
}
.fa-star-o:nth-child(1) {
left: 235px;
}
.fa-star-o:nth-child(odd) {
z-index: 40;
width: 25px;
}
.fa-star-o:nth-child(10) {
left: 20px;
}
/*
forum question answer only
https://www.sitepoint.com/community/t/fill-half-voting-star/405726
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.