.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;
HTML
Tidy

1

​

2

<ul>

3

<li><div class="stars" style="--w:  0%;"></div></li>

4

<li><div class="stars" style="--w: 10%;"></div></li>

5

<li><div class="stars" style="--w: 20%;"></div></li>

6

<li><div class="stars" style="--w: 30%;"></div></li>

7

<li><div class="stars" style="--w: 40%;"></div></li>

8

<li><div class="stars" style="--w: 50%;"></div></li>

9

<li><div class="stars" style="--w: 60%;"></div></li>

10

<li><div class="stars" style="--w: 70%;"></div></li>

11

<li><div class="stars" style="--w: 80%;"></div></li>

12

<li><div class="stars" style="--w: 90%;"></div></li>

13

<li><div class="stars" style="--w: 100%;"></div></li>

14

</ul>

JavaScript + No-Library (pure JS)
Tidy

1

​

CSS
Tidy

    overflow:hidden;
    width:var(--w,50%);
    color: rgb(255, 200, 0);
    z-index:-1;
}

li {
  display: table;
}