JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><div class="stars" style="--w:  0%;"></div></li>
<li><div class="stars" style="--w: 10%;"></div></li>
<li><div class="stars" style="--w: 20%;"></div></li>
<li><div class="stars" style="--w: 30%;"></div></li>
<li><div class="stars" style="--w: 40%;"></div></li>
<li><div class="stars" style="--w: 50%;"></div></li>
<li><div class="stars" style="--w: 60%;"></div></li>
<li><div class="stars" style="--w: 70%;"></div></li>
<li><div class="stars" style="--w: 80%;"></div></li>
<li><div class="stars" style="--w: 90%;"></div></li>
<li><div class="stars" style="--w: 100%;"></div></li>
</ul>

CSS

.stars {
    position: relative;
    display:inline-block;
    font-size: 50pt;
	  height: 1em;
    line-height: 1em;
}

.stars:before {	
    content: "\2606\2606\2606\2606\2606";
}

.stars:after {	
    content: "\2605\2605\2605\2605\2605";
    position:absolute;
    left:0;
    overflow:hidden;
    width:var(--w,50%);
    color: rgb(255, 200, 0);
    z-index:-1;
}

li {
  display: table;
}