18 CSS Lists - Free Frontend

FreeFrontend

Categories: HTML CSS Bootstrap TailwindCSS JavaScript Social: Telegram Other collections:

• - css custom property variables examples
• - css background patterns
• - css buttons
• - css loaders
• - css cards
• - css spinners
• - css keyframes
• - css toggle switches
• - css animations
• - css transform

52 CSS Lists

Introducing the CSS Lists collection, which shows how to transform ordinary <ul> and <ol> tags into visually complex components. The main technical feature is the demonstration of how Flexbox order combined with :has() provides dynamic content re-sorting (e.g., completed tasks always at the bottom) without complex JS. We emphasize the creation of custom markers (like handwritten or circle outlines) via pseudo-elements and the use of CSS Variables to control progress indicators. Master these techniques to create responsive, functional lists and navigation elements.

Literally Linked Lists

live demo

An engaging data comparison tool that transforms static lists into a dynamic relationship map, clearly visualizing taste overlaps via connecting lines.

# css lists # js lists # leaderline js # css counters # css flexbox x close

AutoSort ToDo List (CSS Only)

live demo

A ToDo list with a unique feature: automatic sorting of completed tasks to the end of the list, implemented without JavaScript, using the Flexbox order property and the powerful CSS :has() selector.

# css lists # css to do list # css has # css flexbox x close

Layout Switcher with :has()

live demo

Discover a pure CSS solution for dynamic layout switching between List and Grid views. It leverages the powerful CSS :has() selector to conditionally apply grid-template-columns based on the state of a radio input, all without a single line of JavaScript.

# css lists # css has # css grid # css layout switcher x close

CSS Staircase Hover Effect Using :has()

live demo

This “staircase” hover effect is a prime example of the power of the new CSS :has() selector. It enables elements to react to the state of their siblings, creating a complex and elegant animation without JavaScript.

# css has # css lists # css hover effects x close

The Magic of Cascading CSS Counters

# css counters # css lists # js lists # js drag drop

Interactive Loose-Leaf Todo List

# css lists

Morphing Moonrocks

# css lists

The Order of Operations

# css lists

Todo List with Sticky Notes

# css lists

Codepen Team Member List - Even/Odd Styles

# css lists

Reversed and Split List

# css lists

Reversed and Split List with ::before

# css lists

Compact Book Quotes

# css lists

Custom Properties Step Progress Indicator

# css lists

Handwritten Shopping List with Custom markers

# css lists

A Better OL (Numbered List with Circle Outline)

# css lists

Named Scroll-Timeline Vertical

# css lists

Inline Lists with Conditional Separators

# css lists

Just Another Definition List, Grid, Sass, Responsive

# css lists

Mini Insta-Friends Scrolling List Layout

# css lists

Take a Number Contact List

# css lists

CSS Pseudo Commas: Exploring Comma Rules in Nouns and Verbs

# css lists

Pure CSS To-Do

# css lists

Sticky Definition List

# css lists

OL Cards - Single Element

# css lists

Ordered List Arrow Cards

# css lists

UL-Circles with Icons

# css lists

OL Circle Cards

# css lists

• ««
• «
• 1
• 2
• »
• »»