title: How can I reset a CSS-counter to the start-attribute of the given list
body: <p>I am using a self-styled, numbered list. How can I read the start-attribute and add it to the counter with CSS?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ol&gt;
      &lt;li&gt;Number One&lt;/li&gt;
      &lt;li&gt;Number Two&lt;/li&gt;
      &lt;li&gt;Number Three&lt;/li&gt;
  &lt;/ol&gt;
  &lt;ol start="10"&gt;
      &lt;li&gt;Number Ten&lt;/li&gt;
      &lt;li&gt;Number Eleven&lt;/li&gt;
      &lt;li&gt;Number Twelve&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ol {
      list-style-type: none;
  
      /* this does not work like I expected */
      counter-reset: lis attr(start, number, 0);
  
  }
  li {
      counter-increment: lis
  }
  li:before {
      content: counter(lis)". ";
      color: red;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hcWpp/1/" rel="noreferrer">FIDDLE</a></p>