Css Baumansicht mit Linien

-1

Ist dies möglich, Baum mit HTML und CSS nur zu machen, die Linien zwischen Knoten (nicht Text von Knoten) verbunden enthält?Css Baumansicht mit Linien

Siehe image

wäre ich Ihnen dankbar, wenn Sie ein Beispiel geben würde.

ich erreichte nur das:

<ul> 
<li class="container"><p><r>Testing</r> </p> 
    <ul> 
     <li><p><r>Testing 1</r></p></li> 
     <li><p><r>Testing 2</r></p></li> 
     <li class="container"><p><r>Testing</r> </p> 
      <ul> 
       <li><p><r>Testing 1</r></p></li> 
       <li><p><r>Testing 2</r></p></li> 
       <li><p><r>Testing 3</r></p></li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li class="container"><p><r>Testing</r> </p> 
    <ul> 
     <li><p><r>Testing 1</r></p></li> 
     <li><p><r>Testing 2</r></p></li> 
     <li><p><r>Testing 3</r></p></li> 
    </ul> 
</li> 
<li class="container"><p><r>Testing </r></p> 
    <ul> 
     <li class="empty"><p><r>empty</r></p></li> 
    </ul> 
</li>

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; 
}

https://codepen.io/xotonic/pen/JRLAOR

Quelle

2016-10-09 Dmitry Kuzmin

Ja. Hast du etwas versucht, um dies zu erreichen? – Xufox

@Xufox Ich versuche, ': before'-Pseudo-Element hinzuzufügen, um einen Kreis in Inhalt div, aber Linien zeichnen, um den div-Kreis statt. –