CSS3 Star Rating System
A very basic star rating system created only in CSS by Dave Gunnoe. The stars are created using html codes (
☆) and then styled with CSS. These stars are created inside a
span tag and these tags are in a nested structure so that if the 4th star is hovered, all the previous stars will also get hovered.
On hovering the stars,
:before pseudo element of the
span tag gets created which overlays the "hollow" star with the "solid" star. It's a pretty cool effect but this is not usable in real world applications. If you want to create a real star rating system, make sure you use JS or PHP with that.
- Graphite Navigation
- Social Media Sharing Buttons