Line Numbers Every Nth Line with CSS Counters

How can I add line numbering to my paragraph?

You can create custom counter and use counter-increment: custom-counter+5 so it will increment by 5 but it will start from 5 not from 1, but you can add number 1 for first p with :before and exclude it from counter.

.content {  width: 200px;  counter-reset: custom-counter;}p {  display: table;}p:not(:first-child):before {  counter-increment: custom-counter+5;  content: counter(custom-counter)". ";  display: table-cell;  color: #aaa;}p:first-child:before {  display: table-cell;  color: #aaa;  content: '1. '}

<div class="content">  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, blanditiis.</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, eligendi.</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, minus.</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus?</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, laboriosam.</p></div>

Adding Numbers to ol li via counters (when using display flex) not working

you need to reset the counter in body tag body { counter-reset: all; }

body {
  counter-reset: all;
}
#two li {display: flex;}
#two li::before {
  counter-increment: all;
  content: "list " counter(all) "- ";
}

<div>
<ol>
  <li>Apple</li>
  <li>Mango</li>
  <li>Oranges</li>
  <li>Peach</li>
  <li>PineApplie</li>
</ol>
</div>

<div>
<ul id="two">
  <li>Apple</li>
  <li>Mango</li>
  <li>Oranges</li>
  <li>Peach</li>
  <li>PineApplie</li>
</ul>
</div>

CSS Counters with different counter display in every level without extra classes

Following the anser on the question you linked, you simply need to change the CSS selectors.

For each additional level you want to target, add another ol to the selector list.
In a production environment, you would probably prepend all of the selectors with your wysiwyg editor class.

/* first level */

ol {
  counter-reset: l1;
  list-style-type: none;
}

ol li:before {
  counter-increment: l1;
  content: counter(l1) " ";
}

/* second level */

ol ol {
  counter-reset: l2;
}

ol ol li:before {
  counter-increment: l2;
  content: counter(l1) "." counter(l2) " ";
}

/* third level */

ol ol ol {
  counter-reset: l3;
}

ol ol ol li:before {
  counter-increment: l3;
  content: counter(l1) "." counter(l2) "." counter(l3) " ";
}

<ol>
  <li>
    First Level

    <ol>
      <li>
        Second Level
        <ol>
          <li>Third Level</li>
          <li>Third Level</li>
        </ol>
      </li>
      <li>Second Level</li>
    </ol>
  </li>
</ol>

<p>a paragraph, followed by another list</p>

<ol>
  <li>
    First Level

    <ol>
      <li>
        Second Level
        <ol>
          <li>Third Level</li>
          <li>Third Level</li>
        </ol>
      </li>
      <li>Second Level</li>
    </ol>
  </li>
</ol>

Align code line numbers with CSS

If you want a pure CSS solution, there is only one way: use a fixed-width solution, i.e. explicitly declare a width on the ::before pseudo-element. However, this approach is never future-proof as you will have to account for scenarios where the counter might run into 3, 4, or more digits.

pre {  counter-reset: line;}
code {  counter-increment: line;}
code::before {  content: counter(line);  display: inline-block;  width: 1.5em; /* Fixed width */  border-right: 1px solid #ddd;  padding: 0 .5em;  margin-right: .5em;  color: #888;  -webkit-user-select: none;}

<pre><code>Code</code><code>Code</code><code>Code</code><code>Code</code><code>Code</code><code>Code</code><code>Code</code><code>Code</code><code>Code</code><code>Code</code><code>Code</code><code>Code</code></pre>

Is it possible to count lines of text in CSS

If the number of lines will be limited, you can try something like below:

code {
    white-space: pre-wrap;
    position: relative;
    padding-left: 5ch; /* the space for the numbers */
    display: block;
    overflow: hidden; /* hide the non needed numbers */
    border: 1px solid;
}
code::before,
code::after {
  content: "1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14."; /* and so on*/
  position: absolute;
  width: 0; /* force a line break */
  top: 0;
  left: 0;
}

code::after {
  content: "| | | | | | | | | | | | | | | | | |"; /* and so on*/
  left: 3ch; /* a small offset to not overlap the numbers */
}

<p>Here is a basic "hello world" program, written in Rust:</p>
<code>
fn main() {
    println!("Hello, world!");
}
</code>
Another code block:
<code>
fn main() {
    let mut a = 0;
    let mut b = 2;

    println!("Hello, world!");

    for i in 0..5) {
        a += b;
    }

    println!("{}", a);
}
</code>

counter-increment in CSS

just change last css rule into

ol li:before {content: ""; color: green; display: inline-block; width: ... ; }
ol li + li:before {content: counter(chapter) "."; }

in this way you insert the content starting from second li element (I used li + li so it can work also with IE8)

see fiddle: http://jsfiddle.net/WwNqN/

---

Related Topics