Categories
CSS Web development

CSS Star Rating

CSS Star Rating

Star rating is used by reviewers for ranking things like products, films, restaurants, or hotels (usually, five stars being the highest rating).

Demo:

To create the CSS Star Rating follow the steps below:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

Create the stat container and add five stars:

<div class="star-rating">Star Rating:
<div class="starOne">&#x2605;</div>
<div class="starTwo">&#x2605;</div>
<div class="starThree">&#x2605;</div>
<div class="starFour">&#x2605;</div>
<div class="starFive">&#x2605;</div>
</div>

Step2.

Add CSS

Set the color and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.star-rating {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
}

Style the stars:

.starOne, .starTwo, .starThree, .starFour, .starFive {
  position: relative;
  top:-5px;
}

.starOne, .starTwo, .starThree {
  color: #e9c46a;
}

.starFour, .starFive {
  color: #333;
}

.starFour:before {
    content: '\2605';
    position: absolute;
    display: flex;
    color: #e9c46a;
    margin-left: 0;
    width: 26px;
    overflow: hidden;
}

Enjoy coding!