CSS counter styling


/ Published in: CSS

two properties:
* counter-reset
* counter-increment
This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.


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.