Vivliostyle-CLIでリストをファイルツリーとして描画する

Markdownのリストとして記述された要素を、ファイルツリーとして描画するCSSのサンプルです。
カスタムデータ属性をキャプションとして使用する方法は、テーブル要素にも応用できるかもしれません。

CSSのみで作る見やすいファイルツリーを参考にアイコンの削除、px指定をem指定に変更しました。

描画結果

ソースコード

<div class="tree" data-caption="図1 ファイル構成">

* root
  * sub1
    * file1.txt
    * file2.txt
  * sub2
    * file3.txt
  * sub3
    * sub3a
      * sub3b

</div>

 .tree {
   position: relative;
   background: white;
   margin:0 0 0 2em;
   font-family: 'Roboto Mono', monospace;
   font-size: .85em;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
   border: solid 1px #666;
   padding: 1em;
 }

 .tree::after {
   content: attr(data-caption);
   text-align: center;
   bottom: -1.5em;
   width: 100%;
   position: absolute;
 }

 .tree ul {
   padding-left: 1em;
   list-style: none;
 }
 .tree ul li {
   position: relative;
   padding-top: 0.25em;
   padding-bottom: 0.25em;
   padding-left: 1em;
   box-sizing: border-box;
 }
 .tree ul li:before {
   position: absolute;
   top: 1.1em;
   left: 0;
   width: 0.7em;
   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: 1.1em;
 }