Hey Readers!

We visit uncountable web pages in a day. We read reviews, news, blog posts etc.

In many of these pages, you might have seen a star rating.

A star rating consists of a series of stars. A star rating is required to know the user’s opinion about a particular thing. The more star rating you get, the better is the opinion. A star rating can be generally seen on e-commerce websites, a product review, a survey, a feedback form etc.

Usually, a star rating consists of 5-6 stars. And just whatever you feel like, you click those many stars and your rating is submitted.

This blog post will help you create a very simple star rating widget with pure HTML and CSS.

HTML :

<div class="star_rating">
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
</div>

CSS :

.star_rating span:hover:before {
  content: "\2605";
  position: absolute;
}

OUTPUT :

EXPLANATION :

Here, we are using hollow stars () in the original state. And when you hover over the stars, they will turn into solid stars () with the color specified above in CSS. 

Just by it being "absolutely" positioned, the top: 0; left: 0; are implied automatically in all modern browsers. So, the solid star sits right at the top of the hollow star.

In this, the stars are changed only at hover and nothing more happens. Probable chances are  JavaScript getting involved with rating the stars. JS is needed so that when the user clicks a star, the rating is submitted and reported. And the rating gets permanently displayed till that user stays on the webpage.

Keep Coding! :)