loading...
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

my codepens (6 Part Series)

1) Quick Hulk Code Pen 2) A Simple ⭐ Rating Code Pen 3 ... 4 3) A 💩 Notification Code Pen 4) Probably another Battleship board on Code Pen 5) The CSS mask property 6) Toast Messages

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.

my codepens (6 Part Series)

1) Quick Hulk Code Pen 2) A Simple ⭐ Rating Code Pen 3 ... 4 3) A 💩 Notification Code Pen 4) Probably another Battleship board on Code Pen 5) The CSS mask property 6) Toast Messages

Posted on by:

nickytonline profile

Nick Taylor (he/him)

@nickytonline

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

Discussion

markdown 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 :)