File Tree Structure using CSS

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)