带有线条的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的线代替了圆。 –