帶有線條的Css樹形視圖

-1

這是可能的使用僅包含連接在節點之間的連線（不是節點文本）的html和css的樹？帶有線條的Css樹形視圖

我將不勝感激，如果你舉個例子。

我實現只：

<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

來源

2016-10-09 Dmitry Kuzmin

是的。你有沒有嘗試過實現這個目標？ – Xufox

@Xufox我嘗試添加'：before'僞元素以在內容div中繪製圓，但繪製到div的線代替了圓。 –