.stars {
    position: relative;
    float: left;
    font-size: 50pt;
	  height: 1em;
    line-height: 1em;
}

.stars:before {	
    content: "\2606\2606\2606\2606\2606";
    float: left;
    z-index: 1;
}

.stars .percent {
    position: absolute;
    left: 0;
    float: left;
    overflow: hidden;
    z-index: -1;
}

.stars .percent:after {	
    content: "\2605\2605\2605\2605\2605";
    color: rgb(255, 200, 0);
}

li {
  display: table;
}

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