File tree structure
It is very simple but amazing file structure design in Pure CSS that you can apply to an unordered list, just follow the below steps : -
- create a simple html file
- use nested HTML Unordered Lists
<ul>
<li>root
<ul>
<li>folder one
<ul>
<li>file_one.txt</li>
<li>file_two.txt</li>
</ul>
</li>
<li>folder two
<ul>
<li>file_one.txt</li>
<li>file_two.txt</li>
</ul>
</li>
</ul>
</li>
</ul>
- Add a span inside every li element
<li><span></span>file_one.txt</li>
-
you can add some folder and files icon or svg in the li element to make the file tree structure look more real
- folder icon
<li><span></span><i class="fa-regular fa-folder-open"></i>root<ul>...rest</li>
- Now finally add some css magic to complete the file tree structure.
- create L shape line by adding following css to the empty span.
border-bottom: 1px solid;
border-left: 1px solid;
height: 1.5rem;
width: 2rem;
display: inline-block;
margin-bottom: 0.3rem;
margin-left: 1rem;
- final output preview
- you can find live example here
- Also checkout the code pointer for the same code sample
Top comments (0)