Search code examples
javascriptfunctionmathcss-tablespseudo-element

How to one-base-index with CSS?

I have an HTML table with 5 rows; each row has two cells (title, main-content).

I wanted to add :before automatic numbering to the rows with this CSS:

.view-my-book .views-field-title {counter-reset: item}
.view-my-book .views-field-title:before {content: counter(item) " ";

It works in the sense that each row is numbered

My problem

The numbering starts from 0* (Zero-Based-Index) while I want to it to start from 1 (One Based Index / OBI); for example I have 5 rows 0-4.

My question

How to one-base-index with CSS (assuming it is possible)?

Solution

  • counter-reset alone resets a counter to 0, as you can see in the docs. If you want to set it to a different number, you can put a number after the counter name, for example:

    .view-my-book .views-field-title {
  counter-reset: item 1
}