リストブロックを使ったCSSツリー階層構成図の作成 – ①

<div  class="tree">
  <ul>
    <li>html
      <ul>
        <li>.htaccess</li>
        <li>index.php</li>
        <li>license.txt</li>
        <li>readme.html</li>
        <li>wp-activate.php</li>
        <li><i class="fas fa-folder"></i>wp-admin</span></li>
        <li>wp-blog-header.php</li>
        <li>wp-comments-post.php</li>
      </ul>
    </li>
  </ul>
</div>

.tree ul {
  list-style-type: none;
  margin: 0px 0px 0px 15px;
  padding: 0;
  position: relative;
}
.tree ul li {
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 5px 0px 0px 20px;
}
/*横ライン*/
.tree ul li:before {
  content: "";
  display: block;
  position: absolute;
  top: 18px;
  left: 0;
  width: 13px;
  height: 0;
  border-top: 1px solid #666;
}
/*縦ライン*/
.tree ul li:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-left: 1px solid #666;
}
.tree ul li:last-child:after {
  height: 18px;
}

.tree > ul > li:before,
.tree > ul > li:after {
  /* 最上位も線を表示する時はコメント化 */
  border: none;
}
.tree i {
   margin-right: 8px;
}