List Styles

1. Ordered list numeration

The browser automatically numbers 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:

<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

<ol> class

list-style-type property value

arabic

decimal

decimal-leading-zero

loweralpha

lower-alpha

lowergreek

lower-greek

lowerroman

lower-roman

upperalpha

upper-alpha

upperroman

upper-roman

2. Checklist

A 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:

* [ ] 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.

<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!