Cover image for A Simple ⭐ Rating Code Pen

A Simple ⭐ Rating Code Pen

nickytonline profile image Nick Taylor (he/him) Updated on ・1 min read

Cover image care of Flickr user sparkyloe.

Continuing along with my 2018 Resolutions to make Code Pens this year, here is my latest. A super simple rating component showing how with just CSS you can go from 1 to 5 stars. I'll admit that there is nothing mind blowing in terms of what the pen does, but the point of it is to demonstrate a way to overcome the lack of previous sibling selector in CSS via Flexbox with row-reverse.

Here's last week's Code Pen, Quick Hulk Code Pen, if you wanna check it out.

Posted on by:

nickytonline profile

Nick Taylor (he/him)


Senior software engineer at DEV/Forem. Caught the live coding bug on Twitch at livecoding.ca


Editor guide

Am I the only one who can't see anything?


Do you not see the embedded code pen? This is what I see.


It is appearing now! It wasn't before though! Looking forward to more of your pens this year :)