list-style
Set marker type, position and image together.
Overview
| Class | Declarations |
|---|---|
list-style:<type>|<position>|<image> | list-style: <type> <position> <image>;
|
Examples
Set type and position together
Use the list-style shorthand when marker type and position belong together. Compare disc and decimal markers placed inside the same content width.
<!-- disc · inside --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc|inside"> <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><!-- decimal · inside --><ol id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:decimal|inside"> <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>A shorthand also resets omitted parts, including the image. The semantic <ul> and <ol> elements describe the list; marker styling alone does not change that meaning.
Generated CSS
@layer utilities { .list-style\:disc\|inside { list-style: disc inside }}Use an image marker
Supply a real image URL. The image takes precedence over the specified disc type; disc remains the fallback if the image is unavailable.
<!-- Local SVG · disc fallback --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc|outside list-style-image:url(/demo/marker.svg)"> <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>This example uses a 12 × 12 SVG. The browser sizes and positions the native marker; use your own asset URL in application code.
Split longhands when variants differ
Resize past sm to move decimal markers inside while preserving their type. Use the dedicated position longhand for that independent change.
<!-- Decimal retained · outside to inside --><ol id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:decimal|outside list-style-position:inside@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>list-style:inside is a full shorthand: it would also reset the decimal type to disc. Explicit list-style-position:inside changes only position.
Apply conditionally
Resize past sm to replace the whole marker treatment: disc outside becomes square inside. Print uses disc outside.
<!-- Whole shorthand · real viewport --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc|outside list-style:disc|outside@print list-style:square|inside@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></ul>