Advanced Search

CSS counter styling

/ Published in: CSS
Save to your folder(s)
two properties:
* counter-reset
* counter-increment
This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. body {
  2.     counter-reset: chapter;      /* Create a chapter counter scope */
  3. }
  4. h1:before {
  5.     content: "Chapter " counter(chapter) ". ";
  6.     counter-increment: chapter;  /* Add 1 to chapter */
  7. }
  8. h1 {
  9.     counter-reset: section;      /* Set section to 0 */
  10. }
  11. h2:before {
  12.     content: counter(chapter) "." counter(section) " ";
  13.     counter-increment: section;
  14. }

URL: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.