14 CSS Counters
This collection demonstrates how to use the built-in CSS Counters system for automatic numbering and item counting without JavaScript. The core mechanism relies on counter-reset and counter-increment properties paired with pseudo-elements, enabling the numbering of headings, sections, and any block elements. The collection explores creating complex nested numbering (1.1, 1.2) using the counters() function and creative scenarios like real-time counting of selected checkboxes. It is a powerful declarative tool for managing content and document structure.
Last updated:
Literally Linked Lists
An engaging data comparison tool that transforms static lists into a dynamic relationship map, clearly visualizing taste overlaps via connecting lines.
Pure HTML/CSS Image Slideshow
A lightweight, fast gallery that operates without JS libraries, supporting keyboard navigation, mobile swipes, and deep linking to specific slides.
CSS-Only Counter Demo
A pure CSS number counter leveraging CSS Houdini’s @property to animate an integer custom property.
Metal Gear Solid Soliton Radar States
Atmospheric, lively interface elements mimicking high-tech equipment screens with interference, scrolling data, and a countdown.
Responsive Infographic
A highly responsive list component utilizing a CSS variable switch technique to toggle layout states.
Pure CSS Carnival Game
A fun and dynamic reaction game where the user must click moving targets within a time limit, with the score automatically tracked using CSS.
3D Flipping Cards
A classic 3D card flip on :hover within a perspective container, plus an elegant solution for auto-numbering items using CSS counters.