Sitemap CSS

Got Code from Phil

HTML

<div class="sitemap">
    <ul>
      <li><a href="https://www.google.com">Fruits</a></li>
        <ul>
      <li><a href="https://www.google.com">Fruits</a></li>
                <ul style="border-color: green;">
      <li><a href="https://www.google.com">Fruits</a></li>
      <li><a href="https://www.google.com">Fruits</a></li>
      <li><a href="https://www.google.com">Fruits</a></li>
                </ul>
      <li><a href="https://www.google.com">Fruits</a></li>
      <li><a href="https://www.google.com">Fruits</a></li>
        </ul>
      <li><a href="https://www.google.com">Fruits</a></li>
      <li><a href="https://www.google.com">Fruits</a></li>
    </ul>
    </div>

CSS

.sitemap > ul {
      margin: 0;
}

.sitemap ul {
      list-style: none;
      border-left: 1px solid black;
}
.sitemap ul li{
      padding: 1.5em 0 0.5em .25em;
      margin-left: -2.85em;
}
.sitemap ul li a {
      border: 3px solid red;
      padding: 5px 10px;
      text-decoration: none;
      color: black;
}
.sitemap ul li:before{
      content: "__";
      color: black;
      margin-left: -0.25em;
}
.sitemap ul li ul{
      margin-top: 0.5em;
}