CSSでフォルダツリーを作る

Result

こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ
CMSの管理画面なんかで複雑化したページを階層表示する、とかWebサイトのサイトマップとかいろいろ用途はありそうです

css

.tree {/*親要素*/
  position: relative;
  background: white;
  margin-top: 20px;
  padding: 30px;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
}

.tree ul {/*親フォルダ*/
  padding-left: 5px;
  list-style: none;
}
.tree ul li {/*ファイル名部分*/
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  box-sizing: border-box;
}
.tree ul li:before {/*横線*/
  position: absolute;
  top: 15px;
  left: 0;
  width: 10px;
  height: 1px;
  margin: auto;
  content: '';
  background-color: #666;
}
.tree ul li:after {/*縦線*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  content: '';
  background-color: #666;
}
.tree ul li:last-child:after {/*これ以下は別フォルダになる事を明示する為、少しだけ離す*/
  height: 15px;
}

線はよくあるパターンですが疑似要素に幅を付けて背景色を与えて実装されています

html

<div class="tree">
  <ul>
    <li><i class="fa fa-folder-open"></i> Project
      <ul>
        <li><i class="fa fa-folder-open"></i> Opened Folder <span>- 15kb</span>
          <ul>
            <li><i class="fa fa-folder-open"></i> css
              <ul>
                <li><i class="fa fa-code"></i> CSS Files <span>- 3kb</span>
                </li>
　　　・
　　　・
　　　・
</div>

via

File Tree CSS