1

Using CSS counters, is it possible to set a class that displays a counter in a :before, but have the initial value of that counter be set for each use of the class?

For example, If I am showing line numbers using the css and html below, can I create a class that allows me to say to start the line numbers from 7 instead of 1, or, do I have to create a unique class for every block that I want to start at a different initial counter value?

pre { counter-reset: line; }
code{ counter-increment: line; }
code:before{ content: counter(line); }

<pre><code>Line of code</code></pre>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Stephen Graham
  • 378
  • 2
  • 14
  • Next time try to make a google search before. Something like "css counter value set". First result is the answer many times. – miguel-svq Dec 19 '17 at 11:57
  • 1
    @miguel-svq I don't think the first result is the answer many times at all. I know how to reset the counter but cannot understand how to do it using the same class but starting at different values for each use of that class. – Stephen Graham Dec 19 '17 at 12:08

2 Answers2

1

You can supply an arbitrary starting value to counter-reset, but you'd need to do this with each pre element using its inline style attribute, and you'd need to supply a number 1 less than your desired starting line number:

pre { counter-reset: line; }
code { counter-increment: line; }
code::before { content: counter(line); float: left; margin: 0 1ch; }
<pre style="counter-reset: line 6"><code>Line of code</code></pre>

As you can imagine, this is incredibly hacky (I'm not referring to your implementation of line numbers here, since it's not the focus of your question, and my statement applies to any implementation that makes use of CSS counters however robust), but there is no other CSS-only solution (and you might even consider the use of inline styles "not CSS-only", which is perfectly understandable). This is why the majority of implementations use JavaScript in some shape or form to make it a little easier on the end user (the author).

If only browsers supported attr() with properties other than content, this would be made completely trivial, but alas, they don't, so the following hypothetical solution isn't going to work:

pre { counter-reset: line; }
pre[data-line] { counter-reset: line calc(attr(data-line integer) - 1); }
code { counter-increment: line; }
code::before { content: counter(line); float: left; margin: 0 1ch; }

<pre data-line="7"><code>Line of code</code></pre>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

The property value can have the name of the counter AND the initial value:

counter-reset: line 999

https://www.w3.org/wiki/CSS/Properties/counter-reset

miguel-svq
  • 2,136
  • 9
  • 11
  • So, i can use this in my initial class declaration, pre { counter-reset: line 999; }, but, when I use this class in the html, can I somehow specify the initial value of 999 (
    Line of code
    )?     – Stephen Graham Dec 19 '17 at 12:02