「リスト」ブロックのリストを階層表示する方法

図1に示すように、以下の手順で指定します。

1. 「リスト」ブロックを配置します。
   階層に応じて、リストにインデントを指定します。
2. 高度な設定→追加CSSクラスにmy-hierarchyと入力します。

以下のコードをstyle.cssに追加します。

.article .my-hierarchy {
  background-color: #000;
  color: #eaeaea;
  font-family: 'Menlo', 'Consolas', 'monaco', 'monospace', 'ＭＳ ゴシック', sans-serif;
  overflow-x: auto;
  padding: 15px;
  white-space: nowrap;

  /* スクロールバー指定 */
  &::-webkit-scrollbar {
    height: 10px;

    &-thumb {
      background-color: #ccc;
    }
  }

  /* 直下および階層内のli指定 */
  li {
    list-style: none;
    margin: 0;
    padding-left: 1em;
    position: relative;
  }

  /* 子階層のul指定 */
  ul {
    margin: 0;
    padding-left: 1em;

    li {
      /* ツリー構造の横線 */
      &::before {
        background-color: #fff;
        content: '';
        height: 1px;
        left: -0.5em;
        margin: auto;
        position: absolute;
        top: 0.75em;
        width: 1em;
      }

      /* ツリー構造の縦線 */
      &::after {
        background-color: #fff;
        bottom: 0;
        content: '';
        height: 100%;
        left: -0.5em;
        position: absolute;
        top: 0;
        width: 1px;
      }

      /* 最後の要素の縦線を途中で止める */
      &:last-child::after {
        height: 0.75em;
      }
    }
  }
}