htmlcsscss-counter

Use css counter in calc

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
Solution

  • 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.