Star ratings in CSS! ⭐️
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

🌟 one of my 100 projects 🌟

css star ratings

A little CSS-based star-rating module

🎬 css-star-ratings in action 🎬


  • Well, first I tried to make this happen with a <ul>, but I learned very quickly that the unicode-bidi: bidi-override and direction: rlt combo don't do the kind of reversal I wanted here. What they do on a <ul> is flip the position of the bullet, which is good to know, but it wasn't what I wanted, so fine! <span>s it is.
  • CSS Tricks: Star Ratings With Very Little Code is the basis of the bulk of the CSS here. I added flexbox display to the .rating container so that there wouldn't be those annoying little gaps between the star <span>s. (I've seen the workarounds for hacking that space and they all look like a nightmare for long-term maintenance.)
  • Once again, I tinkered around in Jackson's Spectral app to choose colors for the stars. 👍