21+ CSS Counter Examples

Last Updated on by in CSS Examples
CSS Counter

If you are looking for a collection of CSS Counter for assigning numbers automatically to elements in a webpage in a creative manner, you’re in the right place.

In this compilation, we are showcasing 21+ free HTML and CSS Counter code examples that we have gathered from top-notch platforms such as CodePen and GitHub.

CSS Counter allows developers to automatically number elements in a webpage. Providing a way to generate and display sequential numbers for various purposes, such as numbering items in a list, creating numbered headings, or labeling sections of a document,.

We carefully selected each CSS counter example that offers our users a dynamic way to engage with content on a website while keeping your design sleek and up-to-date.

Whether it’s simple counter cards or advanced counter UI designs, we offer something for everyone to ignite their creativity and keep them up-to-date with the latest design trends.

Every counter item in our collection makes your user interface look better, is highly interactive, and includes features like responsive designs that adjust to different screens, CSS animations, moving effects, stylish fonts, and smooth transitions.

Your website or app will not just look cool but will also work really well and be easy for people to use. So, let’s explore our collection today and find out how CSS counter snippets can offer a convenient solution for numbering elements dynamically within web pages.

1. Continuous Numbering of Separate Ordered Lists with CSS Counters

See the Pen
Continuous Numbering of Separate Ordered Lists with CSS Counters
by George W. Park (@GeorgePark)
on CodePen.


Author: George W. Park @GeorgePark
Links: Source Code / Demo
Created on: DECEMBER 20, 2017
Made with: HTML, CSS

2. Pagination CSS Counter

See the Pen
Pagination CSS Counter
by Will Boyd (@lonekorean)
on CodePen.


Author: Will Boyd @lonekorean
Links: Source Code / Demo
Created on: NOVEMBER 7, 2014
Made with: HTML, CSS

3. CSS Counter Cards

See the Pen
CSS Counter Cards
by Dan Powell (@bloom-dan)
on CodePen.


Author: Dan Powell @bloom-dan
Links: Source Code / Demo
Created on: NOVEMBER 21, 2016
Made with: HTML, CSS

4. CSS Gradient Counter List

See the Pen
CSS Gradient Counter List
by Mattia Astorino (@equinusocio)
on CodePen.


Author: Mattia Astorino @equinusocio
Links: Source Code / Demo
Created on: MARCH 7, 2019
Made with: HTML(Pug), CSS(PostCSS)

5. CSS Counter

See the Pen
CSS Counter
by Mj (@jhynzar)
on CodePen.


Author: Mj @jhynzar
Links: Source Code / Demo
Created on: MAY 21, 2019
Made with: HTML, CSS(SCSS)

6. CSS Counter Grid

See the Pen
CSS Counter Grid
by Preethi Sam (@rpsthecoder)
on CodePen.


Author: Preethi Sam
Links: Source Code / Demo
Created on: DECEMBER 22, 2017
Made with: HTML, CSS

7. Chapter index (CSS counter)

See the Pen
Chapter index (CSS counter)
by Johan Mouchet (@johanmouchet)
on CodePen.


Author: Johan Mouchet @johanmouchet
Links: Source Code / Demo
Created on: JULY 24, 2016
Made with: HTML, CSS(SCSS)

8. CSS Counter Auto Numbered Steps

See the Pen
CSS Counter Auto Numbered Steps
by Alex Raven (@asraven)
on CodePen.


Author: Alex Raven @asraven
Links: Source Code / Demo
Created on: JANUARY 5, 2016
Made with: HTML, CSS

9. CSS Counters – Decimal and Arabic example

See the Pen
CSS Counters – Decimal and Arabic example
by Wendee (@wendee)
on CodePen.


Author: Wendee @wendee
Links: Source Code / Demo
Created on: NOVEMBER 7, 2014
Made with: HTML, CSS

10. Pure CSS Counter

See the Pen
Pure CSS Counter
by Alexander Erlandsson (@alexerlandsson)
on CodePen.


Author: Alexander Erlandsson @alexerlandsson
Links: Source Code / Demo
Created on: MARCH 18, 2016
Made with: HTML, CSS(less)

11. Pure CSS Counter

See the Pen
Pure CSS Counter
by jake (@jak_e)
on CodePen.


Author: jake @jak_e
Links: Source Code / Demo
Created on: MARCH 26, 2014
Made with: HTML, CSS(SCSS)

12. Selection CSS Counter

See the Pen
Selection CSS Counter
by Will Boyd (@lonekorean)
on CodePen.


Author: Will Boyd @lonekorean
Links: Source Code / Demo
Created on: NOVEMBER 7, 2014
Made with: HTML, CSS

13. CSS Counter Numbered Circle List Styling

See the Pen
CSS Counter Numbered Circle List Styling
by Mercury Works (@mercuryworks)
on CodePen.


Author: Mercury Works @mercuryworks
Links: Source Code / Demo
Created on: DECEMBER 5, 2016
Made with: HTML, CSS(SCSS)

14. 3D Flip Clock Counter in Pure CSS (Rebound)

See the Pen
3D Flip Clock Counter in Pure CSS (Rebound)
by Jerry Low (@jerrylow)
on CodePen.


Author: Jerry Low @jerrylow
Links: Source Code / Demo
Created on: DECEMBER 24, 2016
Made with: HTML(Slim), CSS(SCSS)

15. CSS counter example

See the Pen
CSS counter example
by Tim Pietrusky (@TimPietrusky)
on CodePen.


Author: Tim Pietrusky @TimPietrusky
Links: Source Code / Demo
Created on: FEBRUARY 21, 2013
Made with: HTML, CSS

16. Responsive CSS counter showing number of items that didn’t fit screen

See the Pen
Responsive CSS counter showing number of items that didn’t fit screen
by Mustafa Enes (@pavlovsk)
on CodePen.


Author: Mustafa Enes @pavlovsk
Links: Source Code / Demo
Created on: OCTOBER 10, 2017
Made with: HTML, CSS(SCSS)

17. CSS counter

See the Pen
CSS counter
by Mark Robbins (@M_J_Robbins)
on CodePen.


Author: Mark Robbins @M_J_Robbins
Links: Source Code / Demo
Created on: MARCH 20, 2014
Made with: HTML, CSS

18. CSS Counter

See the Pen
051 – CSS Counter
by Matthias Martin (@roydigerhund)
on CodePen.


Author: Matthias Martin @roydigerhund
Links: Source Code / Demo
Created on: February 28, 2028
Made with: HTML(Slim), CSS(SCSS)

19. css-counter

See the Pen
css–counter
by laoyao (@laoyao)
on CodePen.


Author: laoyao @laoyao
Links: Source Code / Demo
Created on: AUGUST 15, 2019
Made with: HTML, CSS

20.CSS Counter Increment

See the Pen
CSS Counter Increment
by Sakthivel Murugasamy (@sakthiinfotec)
on CodePen.


Author: Sakthivel Murugasamy @sakthiinfotec
Links: Source Code / Demo
Created on: JANUARY 21, 2017
Made with: HTML, CSS(Sass), JS

21. CSS Counter

See the Pen
100 days of css #51 – CSS Counter
by Darika (@darika-dev)
on CodePen.


Author: Darika @darika-dev
Links: Source Code / Demo
Created on: NOVEMBER 17, 2018
Made with: HTML(Slim), CSS(SCSS)

22. CSS counter-increment property

See the Pen
CSS counter-increment property
by Peedu Tuisk (@matude)
on CodePen.


Author: Peedu Tuisk @matude
Links: Source Code / Demo
Created on: FEBRUARY 28, 2018
Made with: HTML, CSS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.