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

参考サイト：https://chibashi.me/development/html-css/css-treestructure/

第２階層
- 第２階層
  - 第２階層

第１階層
- 第２階層
  - 第３階層
- 第２階層

Geminiテスト
- フォルダ-1
  - テスト-１.rtf
- フォルダ-2
  - テスト-１.rtf

<div class="tree">
  <ul>
    <li>第１階層
      <ul>
        <li>第２階層
          <ul>
            <li>第３階層</li>
          </ul>
        </li>
        <li>第２階層</li>
      </ul>
    </li>
  </ul>
</div>

.tree ul は前が「親」で後が「子」、親要素の下にある「子要素」にスタイルを適用する。
.tree ul li はそれぞれ親と子の関係が続いている場合、３つの親子関係がマッチする最後の「子要素」にスタイルを適用する。

.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;
}