Lists
Set list-style-type on an entire <ol>/<ul>, or override a single <li class="item-*"> - covers numeric, alphabetic, and non-Latin counter styles.
Whole-list style
Add a style class directly to the <ol> or <ul> to change every item's marker at once.
Preview
- First
- Second
- Third
- First
- Second
- Third
- Alpha
- Beta
- Gamma
<ol class="decimal-leading-zero">
<li>First</li>
<li>Second</li>
</ol>
<ul class="square">
<li>Alpha</li>
<li>Beta</li>
</ul>Per-item style
Use .item-{style} on a single <li> to override just that item's marker, leaving the rest of the list untouched.
- Regular disc item
- Square item
- Circle item
<ul>
<li>Regular item</li>
<li class="item-square">Highlighted item</li>
</ul>Links inherit text color
Any <a> inside a list item inherits currentColor instead of the browser's default link-blue - handy for nav lists and menus styled with a parent text color.
<ul class="text-white">
<li><a href="#">Inherits white, not link-blue</a></li>
</ul>Reference
| Class | list-style-type |
|---|---|
.decimal | decimal |
.decimal-leading-zero | decimal-leading-zero |
.lower-alpha / .upper-alpha | lower-alpha / upper-alpha |
.lower-latin / .upper-latin | lower-latin / upper-latin |
.lower-roman / .upper-roman | lower-roman / upper-roman |
.lower-greek | lower-greek |
.disc / .circle / .square | disc / circle / square |
.armenian, .georgian, .hebrew | Matching native counter styles |
.cjk-ideographic, .hiragana, .hiragana-iroha, .katakana, .katakana-iroha | Matching native counter styles |
.item-{style} | Applies any style above to a single <li> |