Как я могу представить это вложенное в качестве иерархического дерева с использованием CSS? ⇐ CSS

[Anonymous]

Я пытаюсь создать глубоко вложенную

• структура в HTML, чтобы визуально представлять график/структуру дерева, как это:

  Код: Выделить всё

  1830 Palmyra
  └─── 1837 Kirtland
  └─── 1840 Nauvoo
  ├─── 1841 Liverpool
  │    └─── 1849 Liverpool
  │         └─── 1854 Liverpool
  │              └─── 1871 SaltLakeCity
  │                   └─── 1877 SaltLakeCity
  └─── 1842 Nauvoo
  └─── 1858 NewYork
  └─── 1874 Iowa
  └─── 2013 SaltLakeCity
  

  Цель состоит в том, чтобы отобрать это с использованием HTML и CSS (без JS), с линиями, соединяющими каждый уровень и ветвь, аналогично выводу дерева командной строки или генеалогии/семейным древо. Это не должно оставаться в формате UL LI, но это имеет наиболее смысл для меня структурно.ul {
  list-style: none;
  margin: 0;
  padding-left: 1.2em;
  position: relative;
  }
  
  li {
  position: relative;
  padding-left: 1em;
  }
  
  li::before {
  content: '';
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 0.8em;
  height: 0;
  border-top: 1px solid #999;
  }
  
  li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0.9em;
  left: 0.4em;
  height: 100%;
  border-left: 1px solid #999;
  }< /code>
  
  1830 Palmyra
  
  1837 Kirtland
  
  1840 Nauvoo
  
  1841 Liverpool
  
  1849 Liverpool
  
  1854 Liverpool
  
  1871 SaltLakeCity
  
  1877 SaltLakeCity

[*]1842 Nauvoo

• 1858 NewYork
  
  1874 Iowa
  
  2013 SaltLakeCity

< /code>
< /div>
< /div>
< /p>
Это почти работает, но строки не совсем отличаются или выглядят как желаемое текстовое дерево. Вот скриншот о том, как он выглядит в настоящее время:

Любые решения или улучшения для моего текущего подхода будут очень признательны. Библиотеки на основе JS не являются вариантом для этого варианта использования.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -using-css