CSS list Numbering

CSS list Numbering


The below example code shows how to add css code to add Automatic numbering for list with subclauses in HTML using CSS. This example has two levels called chapters and sections. The css uses counter to add numbers automatically. counter-increment will increment the counter one by one. By default the numeric value will be displayed. upper-roman will convert the numeric value into roman numbers.

The below example code has the complete working code.

CSS Code

    Table of Contents
  1. Interfaces
    1. Interfaces in the Real World
    2. Interfaces on the Web
  2. Web Design Goals
    1. What Your Site Does
    2. How Your Site Looks
    3. Usability and Accessibility
  3. Design Process
    1. Research
    2. Structure
    3. Interaction
    4. Aesthetics
    5. Deliverables
  4. Let's Start Working

At percent the above code will works for two levels. This can be edited for n levels.


The output will become

CSS list Numbering

CSS list Numbering


Click here to download the source.