File Tree Structure using CSS

#css #html #codenewbie #tutorial

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 ```html

root
- folder one
  - file_one.txt
  - file_two.txt
- folder two
  - file_one.txt
  - file_two.txt


- Add a span inside every li element
```html


<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. ```css
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

![final preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqmm3d7wqubd9vzcgkyf.jpg)

- you can find live example [here](https://ambujsahu81.github.io/Notes/)
- Also checkout the code pointer for the same [code sample]
(https://github.com/ambujsahu81/Notes/blob/bd519982ed638d2aabff90b1c71f501c89aa0603/docs/main.js#L187)