Css tree view with lines

-1

これは、ノード間に接続された行（ノードのテキストではない）を含むhtmlとcssのみでツリーを作ることは可能ですか？Css tree view with lines

あなたが例を与える場合、私は感謝される

imageを参照してください。私が試してみて、箇条書きなどのカスタムイメージをリストになるだろう

<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コンテンツdivに円を描画する '：before'疑似要素を追加しようとしましたが、円ではなくdivに描画されます。 –