Drawing a tree with HTML and CSS

The top level is a .tree element. (We use this as a shorthand for "element with class tree".)

The CSS code uses @scope and thus requires a browser that is not too old. In particular Firefox began to support this only with version 146 from December 2025.

Within the tree scope the element tags ul and li as well as the classes tree and node should only be used in the places mentioned above.

(Using these tags and classes in other places within the tree scope might confuse the CSS selector matching. But beyond the tree scope the classes and tags may be used, as demonstrated with the inner lists below.)

If the top-level element or an <li> element contains multiple .node elements, they will be linked by vertical edges.

This can be used to reduce indentation levels while still representing parent-child relations.

The expected HTML/DOM structure is quite rigid, requiring elements that are a bit tedious to create in hand-written HTML. It would be possible to make the CSS more forgiving so that some elements can be omitted.

But actually the styling is primarily intended for DOM trees created from hierarchical data such as trees of e-mails, social-media messages, or comments under a blog post. Here the rigidity does not hurt.

--node-gap provides the vertical distance between nodes.

--indent is the indentation per list level.

--link-width, --link-height and --link-radius provide the dimensions of the "upward hooks".

--edge describes the edge in the form expected by border-left and border-bottom properties.

Note that the tree layout renders edges as multiple sections. Therefore edges should typically be solid and opaque to avoid artifacts where the sections touch or overlap.