... back


Good news, everyone



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:
  • disc (• • •)
  • circle (○ ○ ○)
  • square (▪ ▪ ▪)
  • decimal (1 2 3)
  • decimal-leading-zero (01, 02, 03)
  • lower-roman (i ii iii)
  • upper-roman (I II III)
  • lower-greek (α β γ)
  • lower-latin (a b c)
  • upper-latin (A B C)
  • armenian (Ա Բ Գ)
  • georgian (ა ბ გ)
  • lower-alpha (a b c)
  • upper-alpha (A B C)
Note: The syntax highlighting was made with tohtml.com.



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