title: Align code line numbers with CSS
body: <p>I'm trying to insert line numbers in code snippets on my website (<a href="https://qscintilla.com/custom-lexer-example/" rel="nofollow noreferrer">https://qscintilla.com/custom-lexer-example/</a>), using a pure CSS approach (no javascript):</p>
  
  <p><a href="https://i.stack.imgur.com/iv0SF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iv0SF.png" alt="enter image description here"></a></p>
  
  <p>As you can see on the screenshot above, I'm building my website in Wordpress. I use the "Additional CSS" feature from the latest Wordpress version to insert custom CSS. Here is my custom CSS:</p>
  
  <pre><code>pre{
      counter-reset: line;
  }
  code{
      counter-increment: line;
  }
  code:before{
      content: counter(line);
      display: inline-block;
      border-right: 1px solid #ddd;
      padding: 0 .5em;
      margin-right: .5em;
      color: #888;
      -webkit-user-select: none;
  }
  </code></pre>
  
  <p>It works pretty good, when I'm inserting code snippets in my HTML like so:</p>
  
  <pre><code>&lt;pre&gt;
  &lt;code&gt; This is my first codeline &lt;/code&gt;
  &lt;code&gt; This is my second codeline &lt;/code&gt;
  &lt;code&gt; This is my third codeline &lt;/code&gt;
  &lt;code&gt; This is my fourth codeline &lt;/code&gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>Unfortunately, the line numbers don't get aligned properly when the code line reaches double digits. Let's zoom in on the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/t1nHf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t1nHf.png" alt="enter image description here"></a></p>
  
  <p>Of course, the same problem arises when the code line jumps from double to triple digits</p>
  
  <p>How can I fix this?</p>