CSS Counters

CSS counters allow you to automatically number headings, paragraphs, or other content on a webpage. You can use CSS counters to create automatic numbering for chapters, sections, and other types of content.

To use CSS counters, you need to define a counter and then increment it using the counter-increment property. You can also display the current value of the counter using the counter() or counters() function.

Here’s an example of how to create a counter for headings:

h1 {
  counter-reset: chapter;
}

h1:before {
  content: "Chapter " counter(chapter) ". ";
  counter-increment: chapter;
}

In this example, the h1 element is used to define a new counter called chapter using the counter-reset property. The :before pseudo-element is then used to display the current value of the chapter counter using the counter() function. The counter-increment property is used to increment the value of the chapter counter for each h1 element.

You can also use counters to automatically number paragraphs, lists, and other types of content on a webpage. Here’s an example of how to create a counter for paragraphs:

body {
  counter-reset: paragraph;
}

p:before {
  content: counter(paragraph) ". ";
  counter-increment: paragraph;
}

In this example, the body element is used to define a new counter called paragraph using the counter-reset property. The :before pseudo-element is then used to display the current value of the paragraph counter using the counter() function. The counter-increment property is used to increment the value of the paragraph counter for each p element.

CSS counters can be a powerful tool for automatically numbering content on a webpage. They can save time and effort by eliminating the need to manually number content, and they can ensure that numbering is consistent and accurate throughout a document.