Page Widget How to - Create Pure CSS star rating

Question

We would like to know how to create Pure CSS star rating.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#star-rating {<!--  w w  w. j  av  a2s.  c om-->
  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;
}
</style>
</head>
<body>
  <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>
</body>
</html>

The code above is rendered as follows: