Typography
list-style-type
Choose native marker types without changing list semantics.
Overview
| Class | Declarations |
|---|---|
list-style-type:disc | list-style-type: disc;
|
list-style-type:decimal | list-style-type: decimal;
|
list-style-type:<type> | list-style-type: <type>;
|
Examples
Use decimal markers
Use an ordered list for a meaningful sequence and list-style:decimal for decimal markers. This shorthand also resets position to outside and image to none.
Use decimal markers
Marker appearance does not change the list’s HTML meaning. The readout distinguishes the requested type from a potentially overriding image.
<!-- Ordered steps · decimal --><ol id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:decimal"> <li class="mb-2xs">Install dependencies</li> <li class="mb-2xs">Run the production build</li> <li class="mb-2xs">Review the output</li></ol>Generated CSS
@layer utilities { .list-style\:decimal { list-style: decimal }}Use disc markers
Use an unordered list when item order is not significant. The disc shorthand provides ordinary bullets and resets the other list-style parts.
Use disc markers
Marker appearance does not change the list’s HTML meaning. The readout distinguishes the requested type from a potentially overriding image.
<!-- Unordered features · disc --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc"> <li class="mb-2xs">Consistent spacing</li> <li class="mb-2xs">Readable type at every size</li> <li class="mb-2xs">Visible keyboard focus</li></ul>Use a native list style type
Set list-style-type independently for native marker styles. Square suits this unordered feature list; lower-roman labels the ordered steps.
Use a native list style type
Marker appearance does not change the list’s HTML meaning. The readout distinguishes the requested type from a potentially overriding image.
<!-- Unordered · square --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc|outside list-style-type:square"> <li class="mb-2xs">Collect references</li> <li class="mb-2xs">Compare the spacing across every screen size.</li> <li class="mb-2xs">Review the composition</li></ul><!-- Ordered · lower-roman --><ol id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:decimal|outside list-style-type:lower-roman"> <li class="mb-2xs">Collect references</li> <li class="mb-2xs">Compare the spacing across every screen size.</li> <li class="mb-2xs">Review the composition</li></ol>The longhand leaves position and image unchanged. An available image marker takes precedence over the type.
Apply conditionally
Resize past sm to replace decimal markers with lower-roman on screen. Position stays outside and the list remains ordered. Print uses decimal.
Apply conditionally
Marker appearance does not change the list’s HTML meaning. The readout distinguishes the requested type from a potentially overriding image.
<!-- Real viewport · type only --><ol id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:decimal|outside list-style-type:decimal@print list-style-type:lower-roman@screen@sm"> <li class="mb-2xs">Collect references</li> <li class="mb-2xs">Compare the spacing across every screen size.</li> <li class="mb-2xs">Review the composition</li></ol>