article
  h1 Demo: Using CSS counters
  p 
  | In this demo, 
  code article 
  | resets 
  code section 
  | counter to its default value (0), which is then incremented at each section occurrence, then displayed in front of section headings.
  section
    h2 Papa-bear
    p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  section
    h2 Mama-bear
    p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  section
    h2 Baby-bear
    p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    hr
    section
      h3 More information about counter reset
      ul
        li
          a href="http://www.w3.org/TR/css3-content/#counters" counter-reset in the spec
        li
          a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset?redirectlocale=en-US&redirectslug=CSS%2Fcounter-reset" counter-reset at MDN
        li
          a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters" Using CSS counters
View Compiled 
* {
  box-sizing: border-box;
}

article {
  padding: 1em;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  
  counter-reset: section;
}

section {
  counter-increment: section;
}

section h2 {
  &:before {
    content: counter(section) '. ';
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.