How can we change the style of numbering in an ordered list?

How to Change Numbering Styles for Ordered Lists

Ordered lists (<ol>) are usually numbered in XHTML output using numerals. If you want to change the numbering to alphabetical, follow these steps:

Define a custom @outputclass value and set it as an attribute of the ordered list, as in the following example:<ol outputclass="number-alpha"> <li>A</li> <li>B</li> <li>C</li> </ol>
Add the following code snippet in a custom CSS file:ol.number-alpha{ list-style-type:lower-alpha; }
Reference the CSS file in a WebHelp Responsive transformation using an Oxygen Publishing Template or the args.css parameter.

<ol>: The Ordered List element

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

Table of Contents Show

How to Change Numbering Styles for Ordered Lists
<ol>: The Ordered List element
HTML Ordered Lists
The first thing we need to define is where the counter should be reset
Next, we need to add the CSS to auto increment the number of items
And this is the final result
Start with 1.
More about lists

Content categories	Flow content, and if the <ol> element's children include at least one <li> element, palpable content.
Permitted content	Zero or more <li>, <script> and <template> elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	list
Permitted ARIA roles	directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM interface	HTMLOListElement

HTML Ordered Lists

❮ Previous Next ❯

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

The markup

This is the first item
This is the second item
This is the third item
This is the fourth item
This is the fifth item
This is the sixth item

The first thing we need to define is where the counter should be reset

.custom-counter { counter-reset: section; }

Now, the counter will start from 0. The value of the couter-reset property can be anything you want, it will be used for the counter-increment property later.

Next, we need to add the CSS to auto increment the number of items

.custom-counter li::before { counter-increment: step-counter; content: counter(step-counter); }

In this code, we are telling the CSS to start incrementing for all li elements inside .custom-couter. The first li element will be numbered 1, the second will be numbered 2 and so on.

We also use content property to show the number with the value counter(step-counter).

And this is the final result

Some notices:
- You can apply numbered counters with any html tag you want, it isn’t limited to ordered list
- The number don’t have to be decimals, they can be anything that list-style-type property 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)