55+ CSS Lists

Last Updated on by in CSS Examples
CSS Lists

Are you ready to level up your website’s design? Dive into our extensive collection of 55+ HTML and CSS lists! We’ve curated these examples from popular platforms like CodePen and GitHub to bring you a treasure trove of inspiration.

CSS lists play a crucial role in user interface design by organizing content and enhancing visual appeal. Whether it’s bulleted lists, numbered lists, or custom styles, they provide structure and clarity to your web pages. With a stylish and functional CSS list, you can elevate the user experience and make your site more visually engaging.

Our curated collection not only showcases diverse design possibilities but also offers practical solutions to help site users navigate information effortlessly. By staying updated with the latest trends in CSS List, you can stay ahead in UI/UX design and leave a lasting impression on your audience.

Ready to explore the endless possibilities of CSS List? Click here to dive into our collection and take your website’s design to the next level!

1. CSS Pseudo Commas: Exploring comma rules in nouns and verbs

See the Pen
CSS Pseudo Commas: Exploring comma rules in nouns and verbs
by S. Shahriar (@ShadowShahriar)
on CodePen.


Author: S. Shahriar @ShadowShahriar
Links: Source Code / Demo
Created on: August 14, 2021
Made with: HTML, CSS

2. Custom properties step progress indicator

See the Pen
Custom properties step progress indicator
by Michelle Barker (@michellebarker)
on CodePen.


Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: June 28, 2022
Made with: HTML, CSS

3. UL banner cards

See the Pen
UL banner cards
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 6, 2022
Made with: HTML, CSS

4. Just Another Definition List, Grid, Sass, Responsive

See the Pen
Just Another Definition List, Grid, Sass, Responsive
by Dianna Cheng (@girlgeek)
on CodePen.


Author: Dianna Cheng @girlgeek
Links: Source Code / Demo
Created on: March 5, 2021
Made with: HTML, CSS(SCSS)

5. Compact book quotes

See the Pen
Compact book quotes
by lalacode (@lalacode)
on CodePen.


Author: lalacode @lalacode
Links: Source Code / Demo
Created on: June 25, 2022
Made with: HTML, CSS(Sass)

6. The Order of Operations Challenge

See the Pen
The Order of Operations Challenge #cpc-counters #codepenchallenge
by Gražvydas Žilius (@deracans-the-styleful)
on CodePen.


Author: Gražvydas Žilius @deracans-the-styleful
Links: Source Code / Demo
Created on: June 8, 2022
Made with: HTML, CSS(SCSS)

7. Custom Unordered List Styles

See the Pen
Custom Unordered List Styles
by Prasad D. (@prasad-d)
on CodePen.


Author:  Prasad D. @prasad-d
Links: Source Code / Demo
Created on: May 17, 2019
Made with: HTML, CSS (SCSS)

8. Named scroll-timeline vertical

See the Pen
Named scroll-timeline vertical
by utilitybend (@utilitybend)
on CodePen.


Author: utilitybend @utilitybend
Links: Source Code / Demo
Created on: February 6, 2023
Made with: HTML, CSS

9. OL standing cards

See the Pen
OL standing cards
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 7, 2022
Made with: HTML, CSS

10. “Take a number” contact list

See the Pen
"Take a number" contact list
by Suzanne Aitchison (@aitchiss)
on CodePen.


Author: Suzanne Aitchison @aitchiss
Links: Source Code / Demo
Created on: January 7, 2021
Made with: HTML, CSS

11. a better ol (numbered list with circle outline)

See the Pen
a better ol (numbered list with circle outline)
by mattc0m (@mattc0m)
on CodePen.


Author: Mattc0m @mattc0m
Links: Source Code / Demo
Created on: July 12, 2022
Made with: HTML, CSS(SCSS)

12. Inline lists with conditional separators

See the Pen
Inline lists with conditional separators
by Christopher Kirk-Nielsen (@chriskirknielsen)
on CodePen.


Author: Christopher Kirk-Nielsen @chriskirknielsen
Links: Source Code / Demo
Created on: July 18, 2020
Made with: HTML, CSS(SCSS)

13. Codepen Team Member List – Even/Odd Styles

See the Pen
Codepen Team Member List – Even/Odd Styles
by Josetxu (@josetxu)
on CodePen.


Author: Josetxu @josetxu
Links: Source Code / Demo
Created on: June 22, 2022
Made with: HTML, CSS

14. Todo List with Sticky Notes(CPC)

See the Pen
Todo List with Sticky Notes(CPC)
by wheatup (@wheatup)
on CodePen.


Author: Wheatup @wheatup
Links: Source Code / Demo
Created on: April 7, 2022
Made with: HTML, CSS (SCSS), JS

15. Handwritten shopping list with custom markers

See the Pen
Handwritten shopping list with custom markers
by Michelle Barker (@michellebarker)
on CodePen.


Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: June 28, 2022
Made with: HTML, CSS

16. Mini Insta-Friends Scrolling List Layout

See the Pen
Mini Insta-Friends Scrolling List Layout
by Adam Argyle (@argyleink)
on CodePen.


Author: Adam Argyle @argyleink
Links: Source Code / Demo
Created on: October 24, 2020
Made with: HTML, CSS(PostCSS)

17. Reversed and split list

See the Pen
Reversed and split list
by Michelle Barker (@michellebarker)
on CodePen.


Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: June 21, 2022
Made with: HTML, CSS

18. OL circle cards

See the Pen
OL circle cards
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 5, 2022
Made with: HTML, CSS

19. Forbes Leaderboard

See the Pen
Forbes Leaderboard
by Mark Eriksson (@Markshall)
on CodePen.


Author: Mark Eriksson @Markshall
Links: Source Code / Demo
Created on: June 17, 2020
Made with: HTML, CSS(SCSS)

20. Reversed and split list with ::before

See the Pen
Reversed and split list with ::before
by Michelle Barker (@michellebarker)
on CodePen.


Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: June 21, 2022
Made with: HTML, CSS

21. CSS3 List * Spinning Heart list-style | CPC

See the Pen
CSS3 List * Spinning Heart list-style | CPC
by MOZZARELLA (@TheMOZZARELLA)
on CodePen.


Author: mozzarella @TheMOZZARELLA
Links: Source Code / Demo
Created on: April 4, 2022
Made with: HTML, CSS

22. Checklist animation – Only CSS

See the Pen
Checklist animation – Only CSS
by Milan Raring (@milanraring)
on CodePen.


Author: Milan Raring
Links: Source Code / Demo
Created on: March 5, 2020
Made with: HTML, CSS (SCSS)

23. Morphing Moonrocks

See the Pen
Morphing Moonrocks
by Chris Coyier (@chriscoyier)
on CodePen.


Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: April 7, 2022
Made with: HTML (Markdown) , CSS(SCSS)

24. UL cards with depth

See the Pen
UL cards with depth
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 25, 2022
Made with: HTML, CSS

25. Pretty Sticky

See the Pen
Pretty Sticky
by Burmese Potato (@BurmesePotato)
on CodePen.


Author: Burmese Potato @BurmesePotato
Links: Source Code / Demo
Created on: June 17, 2020
Made with: HTML, CSS

26. Interactive Loose-Leaf Todo List

See the Pen
Interactive Loose-Leaf Todo List
by Ian (@IanWoodard)
on CodePen.


Author: Ian @IanWoodard
Links: Source Code / Demo
Created on: April 5, 2022
Made with: HTML, CSS (SCSS)

27. UL-circles with icons

See the Pen
UL-circles with icons
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: February 20, 2022
Made with: HTML, CSS

28. 12 nth Selectors

See the Pen
12 nth Selectors
by Gabriele Corti (@borntofrappe)
on CodePen.


Author: Gabriele Corti @borntofrappe
Links: Source Code / Demo
Created on: December 6, 2019
Made with: HTML, CSS (SCSS)

29. Todo list with Little Details (cpc)

See the Pen
Todo list with Little Details (cpc)
by Amit Sheen (@amit_sheen)
on CodePen.


Author: Amit Sheen @amit_sheen
Links: Source Code / Demo
Created on: April 5, 2022
Made with: HTML, CSS(SCSS)

30. Simple CSS check list

See the Pen
Simple CSS check list
by Garrett (@gnevin)
on CodePen.


Author: Garrett @gnevin
Links: Source Code / Demo
Created on: April 5, 2019
Made with: HTML, CSS

31. UL icon cards

See the Pen
UL icon cards
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 5, 2022
Made with: HTML, CSS

32. Stars list ⭐

See the Pen
Stars list ⭐
by leimapapa (@leimapapa)
on CodePen.


Author: leimapapa @leimapapa
Links: Source Code / Demo
Created on: April 4, 2022
Made with: HTML, CSS

33. Gradient Ordered List

See the Pen
Gradient Ordered List
by Erin E. Sullivan (@erinesullivan)
on CodePen.


Author: Erin E. Sullivan @erinesullivan
Links: Source Code / Demo
Created on: May 15, 2019
Made with: HTML, CSS (SCSS)

34. Sticky Definition List

See the Pen
Sticky Definition List
by Chris Coyier (@chriscoyier)
on CodePen.


Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: October 23, 2021
Made with: HTML, CSS

35. Transfrom Skew Property and nice List styles

See the Pen
Transfrom Skew Property and nice List styles
by vikas singh (@vikassingh1111)
on CodePen.


Author: Vikas singh @vikassingh1111
Links: Source Code / Demo
Created on: March 13, 2019
Made with: HTML, CSS

36. ol-cards – single element

See the Pen
cpc-days | ol-cards – single element
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: February 19, 2022
Made with: HTML, CSS

37. To-do list

See the Pen
To-do list
by Sabine Robart (@_Sabine)
on CodePen.


Author: Sabine Robart @_Sabine
Links: Source Code / Demo
Created on: February 1, 2019
Made with: HTML, CSS (SCSS)

38. Pure CSS To-Do

See the Pen
Pure CSS To-Do
by Adir (@Adir-SL)
on CodePen.


Author: Adir @Adir-SL
Links: Source Code / Demo
Created on: August 22, 2021
Made with: HTML, CSS

39. 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)

40. Ordered List Arrow Cards

See the Pen
Ordered List Arrow Cards
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: December 24, 2021
Made with: HTML, CSS

41. CSS ordered list with leading zero

See the Pen
CSS ordered list with leading zero
by Sven Wolfermann (@maddesigns)
on CodePen.


Author: Oven Wolfermann @maddesigns
Links: Source Code / Demo
Created on: February 22, 2016
Made with: HTML, CSS(SCSS)

42. list style – Ol and ul style

See the Pen
list style – Ol and ul style
by WILDER TAYPE (@wtaype)
on CodePen.


Author: WILDER TAYPE @wtaype
Links: Source Code / Demo
Created on: December 22, 2016
Made with: HTML, CSS

43. File manger selectable list (VanillaJS)

See the Pen
File manger selectable list (VanillaJS)
by Ahmad Nasr (@ahmadnasr)
on CodePen.


Author: Ahmed Nasr @ahmadnasr
Links: Source Code / Demo
Created on: December 18, 2018
Made with: HTML, CSS(SCSS), JavaScript

44. Checkboxes Progress Bar w/ pure CSS

See the Pen
Checkboxes Progress Bar w/ pure CSS #CodepenChallenge
by Miguel (@ruidovisual)
on CodePen.


Author: Miguel @ruidovisual
Links: Source Code / Demo
Created on: July 17, 2018
Made with: HTML (Haml), CSS (Sass)

45. Custom list style via clean css

See the Pen
Custom list style via clean css
by Serluck (@serluk)
on CodePen.


Author: Serluck @serluk
Links: Source Code / Demo
Created on: September 23, 2014
Made with: HTML, CSS

46. CSS List

See the Pen
100dayscss #27
by Daiane Assen (@INapta)
on CodePen.


Author: Daiane Assen @INapta
Links: Source Code / Demo
Created on: February 1, 2019
Made with: HTML, CSS(SCSS)

47. List UI

See the Pen
List UI
by Collin Smith (@collincodes)
on CodePen.


Author: Collin Smith @collincodes
Links: Source Code / Demo
Created on: April 20, 2018
Made with: HTML(Pug), CSS (Stylus)

48. Cards – ListView

See the Pen
Cards – ListView
by Sowmya Seshadri (@sowmyaseshadri)
on CodePen.


Author: Sowmya Seshadri @sowmyaseshadri
Links: Source Code / Demo
Created on: September 13, 2018
Made with: HTML, CSS(SCSS)

49. Benutzerdefinierte Listenpunkte

See the Pen
Benutzerdefinierte Listenpunkte
by Dennis Kovarik (@denniskovarik)
on CodePen.


Author: Dennis Kovarik @denniskovarik
Links: Source Code / Demo
Created on: March 1, 2018
Made with: HTML, CSS(SCSS)

50. Full Circle Note Taking

See the Pen
Full Circle Note Taking
by Tony Banik (@banik)
on CodePen.


Author: Tony Banik @banik
Links: Source Code / Demo
Created on: September 1, 2018
Made with: HTML (Slim), CSS(SCSS), JS

51. CSS-only numbered lists with “drop” shapes

See the Pen
CSS-only numbered lists with "drop" shapes
by Ines Montani (@ines)
on CodePen.


Author: Ines Montani @ines
Links: Source Code / Demo
Created on: August 8, 2017
Made with: HTML(Pug), CSS

52. Checklist Demo (CSS Only)

See the Pen
Checklist Demo (CSS Only)
by Christiaan Snoei (@christiaansnoei)
on CodePen.


Author: Christiaan Snoei @christiaansnoei
Links: Source Code / Demo
Created on: May 27, 2019
Made with: HTML, CSS(SCSS)

53. CSS3 Checklist

See the Pen
CSS3 Checklist
by Tran Nhat Anh (@japananh)
on CodePen.


Author: Tran Nhat Anh @japananh
Links: Source Code / Demo
Created on: April 20, 2019
Made with: HTML(Pug), CSS (Sass)

54. To Do List

See the Pen
To Do List
by Asha Holland (@HollandAsh)
on CodePen.


Author: Asha Holland @HollandAsh
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML(Pug), CSS (Stylus)

55. Flexbox Menu List

See the Pen
Flexbox Menu List
by AyaOki (@mazereeta)
on CodePen.


Author: aMEya @mazereeta
Links: Source Code / Demo
Created on: August 14, 2019
Made with: HTML(Pug), CSS (SCSS)

56. List Styles

See the Pen
List Styles
by Cody McAfee (@gcmcafee)
on CodePen.


Author: Cody McAfee @gcmcafee
Links: Source Code / Demo
Created on: December 19, 2014
Made with: HTML, CSS (Less)

57. Custom Unordered List Styles

See the Pen
Custom Unordered List Styles
by Prasad D. (@prasad-d)
on CodePen.


Author:  Prasad D. @prasad-d
Links: Source Code / Demo
Created on: May 17, 2019
Made with: HTML, CSS (SCSS)

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.