Pure CSS star rating

CSS allows us to create accessible and beautiful star rating systems by simply using its generated content feature. In this article we'll see how to accomplish this task.

We'll use a minimal markup structure:

<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>​

We don't need images here. All we have to do is to hide the default text in an accessible way and display a star via generated content:

#star-rating {
    margin: 1.5em 0;
    text-align: center;
}

#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;
}​

You can see the demo below.

Demo

Live demo