= List Styles :navtitle: Lists == Ordered list numeration The browser automatically numbers xref:antora:asciidoc:ordered-and-unordered-lists.adoc[ordered lists] and selects a numeration style by list depth in the following order: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman. AsciiDoc allows the author to override the numeration style for an ordered list. Here's an example of that output: [source,html] ---- <div class="olist loweralpha"> <ol class="loweralpha" type="a"> <li><p>a</p></li> <li><p>b</p></li> <li><p>c</p></li> </ol> </div> ---- In order to support this customization, you must assign the list-style-type property to the following classes on the `<ol>` element in your stylesheet. |=== |<ol> class |list-style-type property value |arabic |decimal |decimal |decimal-leading-zero |loweralpha |lower-alpha |lowergreek |lower-greek |lowerroman |lower-roman |upperalpha |upper-alpha |upperroman |upper-roman |=== == Checklist A xref:antora:asciidoc:checklists.adoc[checklist] is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked). Here's an AsciiDoc source example that produces a checklist: [source,asciidoc] ---- * [ ] todo * [x] done! ---- If font-based icons are enabled (`icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text. [source,html] ---- <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"> todo</p> </li> <li> <p><i class="fa fa-check-square-o"> done!</p> </li> </ul> </div> ---- The recommended approach is to hide the list markers (`list-style: none`), then add a checkbox glyph on the icon element using either a background image or a `before` pseudo element. Here's how it might appear: * [ ] todo * [*] done!