Typography

list-style-type

Setting the style of the list item marker.

Overview

ClassDeclarations
list-style:disclist-style: disc;
list-style:decimallist-style: decimal;
list-style-type:<type>list-style-type: <type>;

Examples

Use decimal markers

Use list-style:decimal for ordered instructions that need numeric markers.

<ol class="list-style:decimal">    <li>Install dependencies</li>    <li>Run the build</li></ol>
Generated CSS
@layer utilities {    .list-style\:decimal {        list-style: decimal    }}

Use disc markers

Use list-style:disc for unordered lists with default disc markers.

<ul class="list-style:disc">    <li>Fast</li>    <li>Typed</li></ul>

Use a native list style type

Use list-style-type:* when the marker type is not covered by an alias.

<ul class="list-style-type:square">    <li>Square marker</li></ul>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<ul class="list-style:disc:hover list-style:decimal@sm list-style:disc@print">...</ul>

  • Master UI


© 2026 Aoyue Design LLC.MIT License
Trademark Policy