純CSS

Question

創建分層列表我想要看起來像這樣的列表：

我不知道是否有這種類型的設計的名字，但「分級列表「在谷歌上返回的結果看起來像我想要的，所以我在這裏稱之爲。例如，它基本上是用文件系統瀏覽器看到的相同的UI模式（但這不是我的用例）。

我相信我可以用SVG實現這一點，但我想知道是否有純CSS的方式？

我曾嘗試過的一件事是使用嵌套的<ul> s與before僞元素包含一個unicode框圖像字符如┖。我到目前爲止是這樣的：

ul { 
 
    position: relative; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
li.child::before { 
 
    content: "┖"; 
 
    transform: scale(1, 1.8); 
 
    position: absolute; 
 
    left: 1em; 
 
}

<ul> 
 
    <li>Root</li> 
 
    <ul> 
 
    <li class="child">Child Lv. 1</li> 
 
    <ul> 
 
     <li class="child">Child Lv. 2</li> 
 
    </ul> 
 
    <li class="child">Child Lv. 1</li> 
 
    <ul> 
 
     <li class="child">Child Lv. 2</li> 
 
     <li class="child">Child Lv. 2</li> 
 
    </ul> 
 
    </ul> 
 
</ul>

它看起來很糟糕，而且我想不出任何辦法實際上有跨項目連接，因爲我在我的形象的例子做垂直線。希望能夠幫助我最接近我的圖像示例的任何技巧。

SVG可能是可以接受的，但我不想爲這個UI組件添加任何重量級庫，所以這就是爲什麼我要求純CSS。

Answer 1

每@ CBroe對在僞元素使用此邊框的建議是什麼，我想出了：

li { 
 
    position: relative; 
 
    list-style: none; 
 
} 
 

 
li.child::before { 
 
    position: absolute; 
 
    left: -1em; 
 
    top: -0.5em; 
 
    border-left-color: black; 
 
    border-left-style: solid; 
 
    border-left-width: 1px; 
 
    border-bottom-color: black; 
 
    border-bottom-style: solid; 
 
    border-bottom-width: 1px; 
 
    content: ""; 
 
    width: 1em; 
 
    height: 1.1em; 
 
} 
 

 
li.child2::before { 
 
    position: absolute; 
 
    left: -1em; 
 
    top: -2em; 
 
    border-left-color: black; 
 
    border-left-style: solid; 
 
    border-left-width: 1px; 
 
    border-bottom-color: black; 
 
    border-bottom-style: solid; 
 
    border-bottom-width: 1px; 
 
    content: ""; 
 
    width: 1em; 
 
    height: 2.5em; 
 
} 
 

 
li.child3::before { 
 
    position: absolute; 
 
    left: -1em; 
 
    top: -3em; 
 
    border-left-color: black; 
 
    border-left-style: solid; 
 
    border-left-width: 1px; 
 
    border-bottom-color: black; 
 
    border-bottom-style: solid; 
 
    border-bottom-width: 1px; 
 
    content: ""; 
 
    width: 1em; 
 
    height: 3.5em; 
 
} 
 

 
body { 
 
    background: white; 
 
}

<ul> 
 
    <li>Root</li> 
 
    <ul> 
 
    <li class="child">Child Lv. 1</li> 
 
    <ul> 
 
     <li class="child">Child Lv. 2</li> 
 
    </ul> 
 
    <li class="child2">Child Lv. 1</li> 
 
    <ul> 
 
     <li class="child">Child Lv. 2</li> 
 
     <li class="child">Child Lv. 2</li> 
 
    </ul> 
 
    <li class="child3">Child Lv. 1</li> 
 
    </ul> 
 
</ul>

它看起來近乎完美！我們只需要計算當前<li>之上多少個<li>元素不在相同的縮進級別以確定元素的類，這應該很容易做到一點點的JavaScript。

謝謝@CBroe！