Создание списка иерархического с чистым CSS

Question

Я хочу, чтобы сделать список, который выглядит следующим образом:

я не уверен, если есть название для этого типа конструкции, но «иерархического список «вернул результаты в google, которые выглядят так, как я хочу, поэтому я называю это здесь. Это, по сути, тот же шаблон пользовательского интерфейса, который можно увидеть, например, с помощью браузера файловой системы (но это не мой вариант использования).

Я считаю, что могу добиться этого с помощью SVG, но мне интересно, есть ли способ с чистым CSS?

Одна вещь, которую я пробовал, - это вложенный <ul> с псевдоэлементом before, содержащий символ рисования в виде юникода, например ┖. То, что я до сих пор это:

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 может быть приемлемым, но я не хочу добавлять какие-либо тяжеловесные библиотеки только для этого одного компонента пользовательского интерфейса, поэтому я прошу очистить CSS.

Answer 1

совет Per @ 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!