
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">★</div>
<div class="starTwo">★</div>
<div class="starThree">★</div>
<div class="starFour">★</div>
<div class="starFive">★</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!
Read also: