title: CSS target-counter attribute not recognised
body: <p>I'm trying to use <code>target-counter</code> to describe references.</p>
  
  <p>I found out about it from a <a href="http://www.alistapart.com/articles/boom" rel="nofollow noreferrer">List Apart article</a> on making a book with HTML/CSS. There's only <a href="https://stackoverflow.com/questions/6829395/how-to-setup-counters-for-target-counters">one other StackOverflow question</a> and it didn't help me.</p>
  
  <p>The attribute <code>target-counter</code> is not recognised by Chrome, Firefox or Opera, but it's mentioned in the <a href="http://www.w3.org/TR/css3-gcpm/#cross-references" rel="nofollow noreferrer">CSS2 spec</a> and I can't find any other docs that say whether it's supported or not. So I can't tell if it's my code or the browser that's to blame.</p>
  
  <p>You can see the code on <a href="http://dabblet.com/gist/1923000" rel="nofollow noreferrer">this Dabblet snippet</a>, or look at the snippets below.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;h1 id="foo"&gt;Root level&lt;/h1&gt;
  &lt;p&gt;&lt;a href="#bar"&gt;linking to bar&lt;/a&gt; and stuff&lt;/p&gt;
  
  &lt;h1 id="bar"&gt;Second heading&lt;/h1&gt;
  
  &lt;h2 id="sub"&gt;Subhead&lt;/h2&gt;
  &lt;p&gt;Hey there &lt;a href="#foo"&gt;with a link to foo&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>h1 {
      counter-increment: section;
  }
  h1::before {
      content: counter(section) ". ";
  }
  a::after {
      content: leader('.') target-counter(attr(href), section);
  }
  </code></pre>
  
  <p>Any suggestions appreciated.</p>