How can I add line numbering to my paragraph?

Question

I'm trying to add line numbers in my paragraph, like shown on the screenshot, but I don't know how. What should I use? CSS or Javascript? Thank you!

Answer 1

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>