サイトマップのツリー構造を CSS のみで表現する

デモページ

HTML側

<div class="sitemap">
<ul>
  <li><a href="#">ホーム</a>
    <ul>
      <li><a href="#">○○○○○</a>
        <ul>
          <li><a href="#">○○○○○</a></li>
          <li><a href="#">○○○○○</a></li>
          <li><a href="#">○○○○○</a>
            <ul>
              <li><a href="#">○○○○○</a></li>
              <li><a href="#">○○○○○</a></li>
              <li><a href="#">○○○○○</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">○○○○○</a>
        <ul>
          <li><a href="#">○○○○○</a></li>
          <li><a href="#">○○○○○</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>

CSS側

* {
  margon: 0;
  padding: 0;
  list-style: none;
}

.sitemap ul li ul {
  margin-top: .5em;
  margin-bottom: .75em;
  margin-left: 48px;
}
 
.sitemap ul li ul li {
  margin-bottom: .25em;
  position: relative;
}
 
.sitemap ul li ul li::before {
  content: "";
  position: absolute;
  top: -0.5em;
  left: -16px;
  width: 10px;
  height: calc(100% + .75em);
  border-left: 1px solid #3972b2;
}
 
.sitemap ul li ul li:last-child::before {
  height: calc(1em + .25em);
}
 
.sitemap ul li ul li::after {
  content: "";
  position: absolute;
  top: .75em;
  left: -16px;
  width: 10px;
  border-bottom: 1px solid #3972b2;
}