Collection of hand-picked free HTML and pure CSS counter code examples from Codepen and other resources.
Related Articles
Links
Made with
- HTML (Pug) / CSS (PostCSS)
About a code
CSS Gradient Counter List
An example of CSS counter with a fixed background gradient.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Counter Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Continuous Numbering
Continuous numbering of separate ordered lists with css counters.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Counter Cards
CSS counters are a fantastic way to make ordered lists better.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Chapter Index
A short Sass function using CSS counter to generate a set of class to number chapters.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Counter Auto Numbered Steps
Auto numbered step callouts with CSS content.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -