Skip to content

Instantly share code, notes, and snippets.

@hugabor

hugabor/tree-structure-pure-css.html

Created February 9, 2021 09:00
Show Gist options
  • Save hugabor/72c068dcf012c95426155872c13a28e7 to your computer and use it in GitHub Desktop.
Save hugabor/72c068dcf012c95426155872c13a28e7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tree-structure-pure-css.html
<html>
<head>
<style>
/* Edit this to customize font-size and other font properties */
ul.tree-structure {
font-size: 1em;
font-family: inherit;
}
/* Edit these variables to customize spacing/sizing */
:root {
--tree-line: 1px solid #000000;
--tree-item-height: 1.5em;
/* --tree-indent: var(--tree-item-height); */
--tree-indent: 1em;
/* --tree-line-hpos: calc(var(--tree-indent) / 2); */
--tree-line-hpos: 0.4em;
--tree-line-top-spacing: 0em;
--tree-entryline-vpos: calc(var(--tree-item-height) / 2);
--tree-entryline-spacing: 0.2em;
}
ul.tree-structure, ul.tree-structure ul, ul.tree-structure li {
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
line-height: var(--tree-item-height);
}
ul.tree-structure li li {
margin-left: var(--tree-indent);
position: relative;
}
ul.tree-structure li li::before {
display: block;
width: calc(var(--tree-indent) - var(--tree-line-hpos) - var(--tree-entryline-spacing));
height: calc(var(--tree-entryline-vpos) - var(--tree-line-top-spacing));
position: absolute;
left: calc(0em - var(--tree-indent) + var(--tree-line-hpos));
top: var(--tree-line-top-spacing);
content: '';
border-left: var(--tree-line);
border-bottom: var(--tree-line);
}
ul.tree-structure li li::after {
display: block;
height: 100%;
position: absolute;
left: calc(0em - var(--tree-indent) + var(--tree-line-hpos));
top: var(--tree-line-top-spacing);
content: '';
border-left: var(--tree-line);
}
ul.tree-structure li:last-child::after {
display: none;
}
</style>
</head>
<body>
<ul class="tree-structure">
<li>src/
<ul>
<li>example/
<ul>
<li>items</li>
</ul>
</li>
<li>more-items/
<ul>
<li>example-item-1</li>
<li>example-item-2</li>
</ul>
</li>
<li>example-item-3</li>
</ul>
</li>
<li>multiple-top-level-items-allowed/
<ul>
<li>even-more-items/
<ul>
<li>example-item-4</li>
<li>example-item-5</li>
</ul>
</li>
<li>example-item-6</li>
</ul>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment