why stars are overlapping if the rating value=1.5, 2.5 , 3.5 and it's working fine for 4.5 and above rating. How to resolve this issue?

[srikanthpathlavath]

[srikanthpathlavath]

please help me to resolve this issue.

[srikanthpathlavath]

If anyone has the same issue, please follow the below steps:

renderStarIconHalf={(index,value) => {

return (
            <span className={`${(value === 0.5 || value === 1.5 || value === 2.5 || value === 3.5)
               ? "cst-half-star" :  ""}`}>
                 <span style={{ position:"absolute"}} >
                       <i className="far fa-star" />
                 </span>
                 <span>
                       <i className="fas fa-star-half" />
                 </span>
            </span>
 );

}}

---

CSS style:

.cst-half-star { margin-right: 10px; }