Список (ul) пирамидкой без костылей и JavaScript (ну или с ним в крайнем случае)?

Question

[apodolsky]

День добрый.
Попалась мне интересная задачка: нужно создать маркированный список с равномерными отступами слева у каждого последующего элемента (в виде пирамидки):

1. Привет, Front page!
----2. Привет, Front page!
--------3. Привет, Front page!
------------4. Привет, Front page!

Очень желательно БЕЗ JavaScript и ручного позиционирования.

Comments

[Дмитрий]

Обычный цикл, каждую итерацию добавляйте нужное

[apodolsky]

Дмитрий, Циклы в CSS3? О_о

[Дмитрий]

apodolsky, в js

[Александр]

nth-child и padding-left

[apodolsky]

Александр, Да ладно)

[Александр]

apodolsky, это сарказм?

Answer 1

[Vadim Bogomazov]

Comments

[apodolsky]

По каким книгам/курсам вы учились верстать? Это отличный и чистый результат, имхо!

Answer 2

[Alex Karo]

Есть у меня подозрение, что без JS это невозможно
Единственное, можно сгенерировать "портянку" стилей с li:nth-child() через препроцессор
https://codepen.io/zarza666/pen/YzzVJPv
Ну, если c js - все просто, проходимся циклом по элементам списка и прописываем paddingLeft: i * 10 + 'px'

Answer 3

[Пес Барбос]

Делается за 2 секунды, если я правильно понял задание)

Comments

[apodolsky]

Вариант, чтобы не прописывать CSS руками)

Answer 4

[Сергей]

Как вариант - просто сделать каждый подпункт отдельным списком и задать всем одинаковый margin-left.

<ul>
<li>
Это первый пункт...
<ul>
<li>
Это второй пункт...
<ul>
<li>
И так далее...
</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 5

[Руслан Лопатин]

Работает только в Firefox