Я ищу код SIMPLEST, ELEGANT, SCALABLE и RECURSIVE CSS для получения списка, подобного этому:
A1 Matilda
A2 Giorgio
B1 Luisa
B2 Giovanni
C1 Anna
C2 Francesco
D1 Giorgio
D2 Marco
E1 Luigi
E2 Giovanna
E3 Maria
D3 Ernesto
C3 Benedetta
B3 Annabella
A3 Stefano
Под рекурсивным я имею в виду, что я не хочу предполагать, что у меня естьопределенное количество уровней вложенности, чтобы не создавать много разных счетчиков для привязки к классам, потому что это усложнит ведение списка в случае изменений.
Поэтому я написал следующий код CSS
.tree { }
.tree ul {list-style: none; }
.tree ul li { }
.tree ul li:before { margin: 0 0.5rem 0 0; }
.tree { counter-reset: alpha; }
.tree ul { counter-increment: alpha; counter-reset: number; }
.tree ul li:before { counter-increment: number; content: counter(alpha,upper-alpha) counter(number); }
для следующего HTML-кода
<div class="tree">
<ul>
<li>Matilda</li>
<li>Giorgio
<ul>
<li>Luisa</li>
<li>Giovanni
<ul>
<li>Anna</li>
<li>Francesco
<ul>
<li>Giorgio</li>
<li>Marco
<ul>
<li>Luigi</li>
<li>Giovanna</li>
<li>Maria</li>
</ul>
</li>
<li>Ernesto</li>
</ul>
</li>
<li>Benedetta</li>
</ul>
</li>
<li>Annabella</li>
</ul>
</li>
<li>Stefano</li>
</ul>
</div>
, но я получаю
A1 Matilda
A2 Giorgio
B1 Luisa
B2 Giovanni
C1 Anna
C2 Francesco
D1 Giorgio
D2 Marco
E1 Luigi
E2 Giovanna
E3 Maria
E3 Ernesto
E3 Benedetta
E3 Annabella
E3 Stefano
Любая идея, как получить то, что я хочу, БЕЗ принятия определенного уровня вложенности (например, 5).
Заранее спасибо.