Use css counter in calc

Question

I have a list ul> li * 5 (not always the same amount). I set the counter for which I get:

1 2 3 4 5

li:nth-child(n):before { counter-increment: skill; content: counter(skill); color: white; } 

Question Can I use the counter (skill) inside calc () or can I add units to it px em rem% ms s

I tried:

 transition: all 250ms linear #{counter(skill)} * 1s; transition: all 250ms linear counter(skill) * 1s; 

I want to increase the delay, for example:

 li 1s delay li 2s delay li 3s delay li 4s delay li Xs delay 

Answer 1

Question: Is it possible to use the counter (skill) inside calc ()

Not. You can not.

The calc function does not allow the use of counter functions as its components. From the specifications here - https://www.w3.org/TR/css3-values/#calc-notation :

The components of a calc() expression can be literal values ​​or attr() or calc() expressions.

There were many requests for this, but it was always rejected. The main reason is that the counter() function represents (outputs) a <string> and therefore cannot be used directly in calc . Moreover, counters are considered very expensive for browsers.

Link: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

However, there were suggestions for adding the counter-value() function, which will return the value as an integer and can be used in calc . See here: https://drafts.csswg.org/css-lists-3/#counter-functions (scroll down to see issue 4).

So now you cannot use counter inside calc , and counter-value does not exist yet.