I try to style a code pre box with line numbers in front of each line. I prefer to do it with CSS only. This is what I have done

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    pre {
      background: #303030;
      color: #f1f1f1;
      padding: 10px 16px;
      border-radius: 2px;
      border-top: 4px solid #00aeef;
      -moz-box-shadow: inset 0 0 10px #000;
      box-shadow: inset 0 0 10px #000;
    }
    pre span {
      display: block;
      line-height: 1.5rem;
    }
    pre span:before {
      counter-increment: line;
      content: counter(line);
      display: inline-block;
      border-right: 1px solid #ddd;
      padding: 0 .5em;
      margin-right: .5em;
      color: #888
    }

&lt;!-- language: lang-html --&gt;

    &lt;pre&gt;
      &lt;span&gt;lorem ipsum&lt;/span&gt;
      &lt;span&gt;&amp;gt;&amp;gt; lorem ipsum&lt;/span&gt;
      &lt;span&gt;lorem ipsum,\ &lt;/span&gt;
      &lt;span&gt;lorem ipsum.&lt;/span&gt;
      &lt;span&gt;&amp;gt;&amp;gt; lorem ipsum&lt;/span&gt;
      &lt;span&gt;lorem ipsum&lt;/span&gt;
      &lt;span&gt;lorem ipsum&lt;/span&gt;
      &lt;span&gt;lorem ipsum&lt;/span&gt;
    &lt;/pre&gt;


&lt;!-- end snippet --&gt;

However, all the lines have the number 1. The increment doesn&#39;t work. Here is a [jsfiddle][1]

1. What I am doing wrong?
2. What is the browser compatibility with this CSS only solution?


  [1]: https://jsfiddle.net/n2xkgt7s/

All Css Counter Solutions on Gang of Coders

Total of 1 Css Counter Solutions

Create line numbers on pre with CSS only