CSS-счетчик и функция Calc ⇐ CSS

[Anonymous]

Я хочу знать, как я могу объединить функцию счетчика CSS с функцией Calc, чтобы составить список значков.

.list-counter{
counter-reset: list;
}

.list-counter div:not(:first-child){
counter-increment: list;
transform: translateX(calc(counter(list) * -1rem));
}


и связанный с ним HTML (используемые классы CSS являются классами попутного ветра)










Я пытался использовать переменные CSS для наследования, но безуспешно

.list-counter{
counter-reset: list;
}

.list-counter{
counter-increment: list;
--val: counter(list);
}

.list-counter div:not(:first-child){
transform: translateX(calc(var(--val) * -1rem));
}



Подробнее здесь: https://stackoverflow.com/questions/782 ... c-function