title: Right-align CSS counters in ::before pseudo-element
body: <p>I'm using CSS counters and the <code>&lt;code&gt;</code> tag to show syntax highlighted code snippets with automatically generated line numbers:</p>
  
  <p><a href="http://jsfiddle.net/zXsXU/" rel="noreferrer">JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;code&gt;
   &lt;div class="line"&gt;&lt;span&gt;line 1&lt;/span&gt;&lt;/div&gt;
   &lt;div class="line"&gt;&lt;span&gt;line 2&lt;/span&gt;&lt;/div&gt;
   ...
  &lt;/code&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>code {
      display: inline-block;
      border: 1px black solid;
      padding: 1em;
      font-family: "Consolas", "Monaco", "Courier New", monospace;
  
      counter-reset: line;
  }
  
  code .line {
      display: block;
  
      counter-increment: line;
  }
  
  code .line::before {
      border-right: 1px black solid;
      padding-right: 1em;
      margin-right: 1em;
  
      content: counter(line);
  }
  </code></pre>
  
  <p>It works well up to 9 lines, but once it hits two digits, it gets out of alignment:</p>
  
  <p><img src="https://i.stack.imgur.com/BJpbm.png" alt="css counters"></p>
  
  <p>How can I make the left edges of the lines align? Or right-align the line numbers?</p>
  
  <p>I've already tried:</p>
  
  <ul>
  <li><code>counter(line, decimal-leading-zero)</code> - it works up to 99 lines, but it breaks at 100, and I don't like the way it looks</li>
  <li>Altering the content with JavaScript, but <code>getComputedStyle(line, '::before').content</code> just returns <code>"counter(line)"</code></li>
  </ul>