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.