4 CSS Nested Lists: Free Code Snippets & Examples

css by Vladimir 1 min read

Nested lists encode hierarchy through indentation — each level visually communicates parent-child relationships without additional explanatory text. CSS nested lists leverage automatic counter-based numbering and connector lines to create tree structures that are both semantically rich and visually clear.

  • Each nesting level uses counter-reset with counter-increment scoped to the <ol> or <ul> depth, producing automatic hierarchical numbering (1, 1.1, 1.2) that updates dynamically as items are added or reordered.
  • Connector lines between parent and child items are drawn using ::before pseudo-elements with border-left and border-bottom, creating visual tree branches that require zero additional HTML markup.
  • Semantic HTML with properly nested <ul> and <li> elements ensures screen readers announce the list depth and position, while aria-level provides explicit hierarchy context when needed.

Browse the collection to find a nested list format that fits your hierarchical data — from documentation outlines with automatic section numbering to file tree navigators with expandable branches.

Table of Contents:

  1. Examples
  2. Frequently Asked Questions

Examples

Minimalist black text on white background showing a nested folder structure drawn with ASCII pipe characters

Pure CSS ASCII File Tree

This Pure CSS ASCII File Tree brings the nostalgia of command-line directory structures to the web without typing a single pipe character manually. By cleverly utilizing CSS pseudo-elements (::before), it automatically draws the connecting lines (│, ├, └) for nested lists. It’s perfect for technical documentation, sitemaps, or retro-themed interfaces.

Technologies:
HTML CSS
Difficulty: Beginner
Browser Support (as of Jan 2026):
Chrome Chrome 4+ Edge Edge 12+ Firefox Firefox 3.5+ Safari Safari 3.1+
Features:
No Images ASCII Art Automatic Nesting Pseudo-Elements
Code by: Heydon Heydon
License: MIT

See the Pen Pure CSS ASCII File Tree.

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.

Frequently Asked Questions

What is the advantage of using counter-reset and counter-increment for nested list numbering?

CSS counters create automatic hierarchical numbering — parent items increment the top-level counter while child items reset and increment their own nested counters. This produces patterns like 1, 1.1, 1.2, 2, 2.1 without manually managing numbering in JavaScript.

How do I ensure nested list connector lines remain accessible?

Connector lines drawn with ::before pseudo-elements and border-left are purely decorative — use aria-hidden="true" on the list container for the lines. Ensure the underlying <ul> with nested <li> elements maintains proper semantic structure for screen reader navigation.

Which CSS properties create expandable nested list sections without JavaScript?

Use the <details> and <summary> HTML elements around nested list sections for native expand/collapse behavior. Style the ::marker of <summary> with content to create custom expand indicators without JavaScript event handlers.

How should nested lists adapt responsively without breaking the tree structure?

Use padding-left with clamp() for indentation at each nesting level so the tree scales proportionally with viewport width. On narrow containers, reduce the indentation increment using Container Queries on the list container.