title: Use css counter in calc
body: <p>I have a list <strong>ul>li*5</strong> (not always the same amount). I set a  counter for which I get:</p>
  
  <p>1 2 3 4 5</p>
  
  <pre><code>li:nth-child(n):before {
    counter-increment: skill;
    content: counter(skill);
    color: white;
  }
  </code></pre>
  
  <p><strong>The Question</strong> Can I use the <em>counter(skill)</em> inside a <strong>calc()</strong> or can I add units to it <strong>px em rem % ms s</strong></p>
  
  <p>I have tried:</p>
  
  <pre><code>transition: all 250ms linear #{counter(skill)} * 1s;
  transition: all 250ms linear counter(skill) * 1s;
  </code></pre>
  
  <p>I want to have the delay increased for example:</p>
  
  <pre><code>li 1s delay
  li 2s delay
  li 3s delay
  li 4s delay
  li Xs delay
  </code></pre>