I have a list ul>li*5 (not always the same amount). I set a counter for which I get:
1 2 3 4 5
li:nth-child(n):before { counter-increment: skill; content: counter(skill); color: white; }
The Question Can I use the counter(skill) inside a calc() or can I add units to it px em rem % ms s
I have tried:
transition: all 250ms linear #{counter(skill)} * 1s; transition: all 250ms linear counter(skill) * 1s;
I want to have the delay increased for example:
li 1s delay li 2s delay li 3s delay li 4s delay li Xs delay
The Question Can I use the counter(skill) inside a calc()
No. You can't.
The calc function does not permit the use of counter functions as its components. From the specs here - https://www.w3.org/TR/css3-values/#calc-notation:
Components of a calc() expression can be literal values or attr() or calc() expressions.
There have been many requests for this but always declined. The underlying reason seems to be that the counter() function represents (outputs) a <string> and hence cannot be used directly in calc. Moreover, the counters are considered very expensive for the browsers.
Reference: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html
However, there have been proposals for adding a counter-value() function which would return the value as integer and could be used in calc. See here: https://drafts.csswg.org/css-lists-3/#counter-functions (Scroll down to see Issue 4).
So as of now, you cannot use counter inside of calc and the counter-value does not exist yet.
