title: CSS tree view with lines connecting nodes
body: <p>Is this possible to create a tree component using only HTML and CSS that contains lines connecting nodes? I'm trying to avoid nested nodes containing text with CSS styles</p>
  <p>See the <a href="https://i.stack.imgur.com/tjOCX.png" rel="nofollow noreferrer">mockup</a> as an example. It heavily inspired by <a href="https://imgur.com/95K2ZL6" rel="nofollow noreferrer">Autodesk Maya inspector tree</a></p>
  <p>I achieved the following but I don't like it because the lines are not connected:</p>
  <p><a href="https://codepen.io/xotonic/pen/JRLAOR" rel="nofollow noreferrer">https://codepen.io/xotonic/pen/JRLAOR</a></p>
  <p>HTML:</p>
  <pre><code>&lt;ul&gt;
  &lt;li class=&quot;container&quot;&gt;&lt;p&gt;&lt;r&gt;Testing&lt;/r&gt; &lt;/p&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;p&gt;&lt;r&gt;Testing 1&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;p&gt;&lt;r&gt;Testing 2&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
          &lt;li class=&quot;container&quot;&gt;&lt;p&gt;&lt;r&gt;Testing&lt;/r&gt; &lt;/p&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;p&gt;&lt;r&gt;Testing 1&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;p&gt;&lt;r&gt;Testing 2&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;p&gt;&lt;r&gt;Testing 3&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class=&quot;container&quot;&gt;&lt;p&gt;&lt;r&gt;Testing&lt;/r&gt; &lt;/p&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;p&gt;&lt;r&gt;Testing 1&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;p&gt;&lt;r&gt;Testing 2&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;p&gt;&lt;r&gt;Testing 3&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class=&quot;container&quot;&gt;&lt;p&gt;&lt;r&gt;Testing &lt;/r&gt;&lt;/p&gt;
      &lt;ul&gt;
          &lt;li class=&quot;empty&quot;&gt;&lt;p&gt;&lt;r&gt;empty&lt;/r&gt;&lt;/p&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  <pre><code>ul, li { list-style: none; margin: 0; padding: 0; }
  ul { padding-left: 1em; }
  li { padding-left: 1em;
    border: 1px dotted black;
    border-width: 0 0 1px 1px; 
  }
  li.container { border-bottom: 0px; 
  }
  li.empty { font-style: italic;
    color: silver;
    border-color: silver;
  }
  p { margin: 0;
    background: white;
    position: relative;
    top: 0.5em; 
    
  }
  p:before {
    content: '';
    position: absolute;
    width: 1em;
    border: 1px solid black;
    height: 1em;
    border-radius: 1em;
    margin-left: 0.5em;
  }
  r {
    margin-left: 2em;
  }
  ul { 
    border-top: 1px dotted black; 
    margin-left: -1em;     
    padding-left: 2em; 
  }
  ul li:last-child ul {
    border-left: 1px solid white;
    margin-left: -17px;
  }
  </code></pre>