Skip to content

Instantly share code, notes, and snippets.

@NullDev
Last active March 27, 2023 12:55
Show Gist options
  • Save NullDev/464b08135138f1c1a135053a898b1a79 to your computer and use it in GitHub Desktop.
Save NullDev/464b08135138f1c1a135053a898b1a79 to your computer and use it in GitHub Desktop.
CSS Star rating System - Percentage Based, CSS Only Star rating System
.rating {
unicode-bidi: bidi-override;
color: #c5c5c5;
font-size: 25px;
height: 25px;
width: 100px;
margin: 0 auto;
position: relative;
padding: 0;
text-shadow: 0px 1px 0 #a2a2a2;
}
.rating-upper {
color: #e7711b;
padding: 0;
position: absolute;
z-index: 1;
display: flex;
top: 0;
left: 0;
overflow: hidden;
}
.rating-lower {
padding: 0;
display: flex;
z-index: 0;
}
<div class="rating">
<div class="rating-upper" style="width: 0%">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
<div class="rating-lower">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
</div>
@obliviga
Copy link

Thank you! By the way, the link to the license doesn't work. @NullDevCo

@NullDev
Copy link
Author

NullDev commented Aug 18, 2021

Ah right, thanks for pointing that out @obliviga !
I corrected the link :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment