CSS list Numbering

CSS list Numbering

Overview

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.

Preview

The output will become


CSS list Numbering

CSS list Numbering

Download

Click here to download the source.