How to Change Numbering Styles for Ordered Lists
- 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.
Flow content, and if the <ol> element's children include at least one <li> element, palpable content. |
Zero or more <li>, <script> and <template> elements. |
None, both the starting and ending tag are mandatory. |
Any element that accepts flow content. |
list |
directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree |
HTMLOListElement |
HTML Ordered Lists
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
Start with 1.
If you want to change any number in a list to 1, here’s how:
-
Double-click the numbers in the list. The text will not appear selected.
-
Right-click the number you want to start a new list.
-
Click Restart at 1.
More about lists
Change bullet indents
Top of Page