3 CSS Nested Lists

1 min read

This collection is a complete guide to styling and extending the functionality of nested lists. It starts with the basics: creating hierarchical numbering (1.1, 1.2.1) with CSS Counters, perfect for documentation. Next, lists are transformed into tree structures by drawing connector lines with pseudo-elements. Finally, interactivity is added by building native accordions with <details>/<summary> or using the “checkbox hack” for smooth, JS-free collapse animations.

A modern nested list with custom graphic icons and smooth hover effects.

Nested List Style

An elegant, modern list of track properties featuring custom graphic icons and smooth micro-interactions like padding shifts and color changes on hover.

See the Pen Nested List Style.

A file tree diagram created with pure CSS, showing nested lists with connecting lines.

OST Tree

A pure CSS tree diagram constructed from nested lists where pseudo-elements with borders form the connecting branches.

See the Pen OST Tree.

List Styles

List Styles

An aesthetically pleasing, modern todo list featuring a vibrant gradient theme and an intuitive hierarchy creation function without complex control buttons.

See the Pen List Styles.