Задать маржу (отступ) на основе значения счетчика в CSS

Мне интересно, можно ли установить элемент margin-left на основе значения счетчика, используя CSS3.

Другими словами, имея такой HTML-код:

<section>A</section>
<section>B</section>
<section>C</section>

имеют первый блок с margin-left: 0em, второй с 1em и т.д.

До сих пор я пробовал следующее:

section
{
    counter-increment: sect-indent;
    margin-left: calc(counter(sect-indent) * 1em);
}

Но кажется, что calc() не поддерживает получение значений счетчика.

Можно ли использовать CSS3? Меня не интересуют решения, связанные с ECMAScript.

Ответ 1

Для небольшого набора

Если вы имеете дело с небольшим набором элементов section рядом друг с другом (как показывает ваш пример), то использование смежного селектора (или nth-of-type, если требуется только поддержка CSS3) будет получите то, что вы хотите, не считая. Однако, возможно, гораздо больше, чем около пяти элементов, и css может стать слишком громоздким, поэтому, если вы смотрите на это на сотни элементов, это не практично.

section { margin-left: 0}
section + section {margin-left: 1em}
section + section + section {margin-left: 2em}

Ответ 2

Он работает только внутри свойства content, а не как переменная, как вы думаете об этом. Если вы просмотрите его в DevTools или тому подобное, это не целое число. Вы все равно увидите counter(myCounter).

"В CSS 2.1 значения счетчиков можно отнести только к свойству content. источник

Ответ 3

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

section::before {
  content: '';
  float: left;
  height: 1.5em; /* a bit more than line height */
  width: 1em;
}

<section>A</section>
<section>B</section>
<section>C</section>
<section>D</section>
<section>E</section>