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>
@tigerous215
Copy link

tigerous215 commented Apr 16, 2020

agree :))
for those who want to change the shape of the stars: You could simply replace spans with "font-awesome" ones:

Don't forget to include font-awesome libraries

bro ur awesome

@emmanuel-a-g
Copy link

this is awesome

@vdenisenko-waverley
Copy link

It works perfect, thanks!

@abubakar-iqbal
Copy link

It's perfect.

@brentdanley
Copy link

This is super clean. Works well. Implemented in a React component. Thanks. :)

@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