Pure CSS star rating

by zerrax

HTML

<ul id="star-rating">
<li class="rated">1</li>
<li class="rated">2</li>
<li class="rated">3</li>
<li>4</li>
<li>5</li>
</ul>

CSS

#star-rating {
  display:block;
    margin: 1.5em 0;
    text-align: center;
    background: rgba(0,0,0,0.3);
    width:100%;
}

#star-rating li {
    display: inline;
    color: transparent;
}

#star-rating li:after {
    content: '\2605';
    color: #000;
    font-size: 1.5em;
    padding-right: 0.4em;
}

#star-rating li.rated:after {
    content: '\2605';
    color: #dd0;
    font-size: 1.5em;
    padding-right: 0.4em;
}