Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Star Rating System

    CSSDeck G+