star-rating Archives - Lena Design

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:

Add HTML
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 colour 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!