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.

Core Technique: Pseudo-Element Piping

The entire visual structure depends on injecting specific Unicode characters before list items.

1. The Branch Connector (├ and └)

Each list item (li) gets a ::before pseudo-element containing the connector characters.

• Standard Item: \251C\2500\2500 renders as ├──.
• Last Item: The :last-child selector overrides this with \2514\2500\2500, rendering └──. This automatic switching is what makes the tree look correct without manual class names.

/* Standard Item: ├── */
.file-tree li::before {
  content: '\251C\2500\2500\0020'; 
}

/* Last Item: └── */
.file-tree li:last-child::before {
  content: '\2514\2500\2500\0020';
}

2. The Vertical Trunk (│)

To connect nested levels, a repeating vertical line is needed. Instead of a background image, this code uses a long string of pipe characters inside the ul’s pseudo-element.

• content: '\2502\0020\2502...' generates a column of │ │ │.
• overflow: hidden on the parent ul ensures this infinite line is cropped exactly to the height of the list content.

Browser Support

This technique relies on standard CSS 2.1 pseudo-elements and Unicode support, making it compatible with essentially every browser in existence.

Key Technologies:

• CSS Pseudo-elements: ::before used for drawing.
• CSS Selectors: :last-child and :not for logic.
• Unicode: Box-drawing characters (U+2500 block).