Author......Ikaros Kappler
Date............2016-01-29
Version................1.0

Custom styling for ordered lists with CSS3

Why this?

A friend who's administrating the content of a website called me recently asking for an easy way to change the numbering of the bibliography notes for an article.

Screenshot:
Screenshot bibliography notes

Here is my answer.

The Basics

Let's start with a simple HTML ordered list (ol).
Note: replace the {X} by A, B or C for the exaples below.

HTML:
<ol class="type{X}">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
      <li>Number 4</li>
      <li>Number 5</li>
      <li>Number 6</li>
      </ol>
    


Result: By default it looks like this:
  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4
  5. Number 5
  6. Number 6
To the left there is the default list numbering which is generated by your browser. We want to change this.

Example A: change the numbering and bullet content

Example A: counter-increment and bullet content.

CSS:
ol.typeA {
      counter-reset: my-awesome-list;
      }
      ol.typeA > li {
      list-style: none;
      }
      ol.typeA > li:before {
             content: "[" counter(my-awesome-list, lower-alpha) "] ";
      counter-increment: my-awesome-list;
      }
    


Result:
  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4
  5. Number 5
  6. Number 6

Example B: The bullet content can be any text

Example B: The bullet content can be any ASCII/Unicode text.

CSS:
ol.typeB {
      counter-reset: my-awesome-list;
      }
      ol.typeB > li {
      list-style: none;
      }
      ol.typeB > li:before {
             content: "-=(" counter(my-awesome-list) ")=- ";
      counter-increment: my-awesome-list;
      }
    


Result:
  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4
  5. Number 5
  6. Number 6

Example C: change the counter start

Example C: Using counter-reset you may also change the begin value for the numbering.

CSS:
ol.typeC {
      counter-reset: my-awesome-list 9;
      }
      ol.typeC > li {
      list-style: none;
      }
      ol.typeC > li:before {
             content: "<" counter(my-awesome-list) "> ";
      counter-increment: my-awesome-list;
      }
    


Result:
  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4
  5. Number 5
  6. Number 6

Change the List Style Type

I found this (https://css-tricks.com/numbering-in-style/) listing of possible list style types. As you see in the examples above the list bullets do not necessarily have to be alphanumerical characters. The list-style-type can be:
Note: The syntax highlighting was made with tohtml.com.



Enjoy the code, have a good time and help others!