CSS Counters #css #scss

counters.scss

/* 
 * CSS Counters
 * More information here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
 */

ol{
counter-reset: simple-numbering; // Sets the counter called simple-numbering to 0.
  li {
    list-style: none;
    position: relative;
    &:before {
      position: absolute;
      margin-right: 5px; // Sets positioning
      // Displays the counter simple-numbering and adds a dot after it. 
      // We can add custom tex (eg: Chapter) content after and before the counter.
      content: counter(simple-numbering)"."; 
      // Sets the counter.
      counter-increment: simple-numbering; 
      color: red; 
    }
  }
}
ul{
  counter-reset: simple-bullets;
  li {
    list-style: none;
    position: relative;
    &:before {
      position: absolute;
      margin-right: 5px;
      content: '\2022';
      counter-increment: simple-bullets;
      color: $main-menu-color;
    }
  }
}
ul.ticks{
  counter-reset: simple-bullets;
  li {
    list-style: none;
    position: relative;
    &:before {
      position: absolute;
      margin-right: 5px;
      content: url('../images/list-tick.png');
      counter-increment: simple-bullets;
      color: $main-menu-color;
    }
  }
}

This article shows creative examples of using CSS Numbering in headings for numbering chapters or even nested lists:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters?redirectlocale=en-US&redirectslug=CSS%2FCounters