list-style-position
Place markers inside or outside the list item’s content box.
Overview
| Class | Declarations |
|---|---|
list-style-position:inside | list-style-position: inside;
|
list-style-position:outside | list-style-position: outside;
|
list-style-position:<position> | list-style-position: <position>;
|
Examples
Place markers inside the content box
An inside marker occupies the first inline box of each item. Wrapped lines begin at the item’s content edge, underneath the marker’s starting position. Compare the same content and width outside and inside.
<!-- Outside · hanging marker --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc|outside"> <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><!-- Inside · marker on first line --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc|outside list-style-position: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>list-style:inside is a shorthand that also resets type and image. The explicit position longhand preserves those independent choices.
Generated CSS
@layer utilities { .list-style-position\:inside { list-style-position: inside }}Keep markers outside
An outside marker hangs beside the item’s principal box. Wrapped text aligns with the first text line. Leave enough inline-start padding so the marker stays within the surrounding surface.
<!-- Outside · aligned text lines --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc|inside list-style-position:outside"> <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>Combine with marker type
Use a shorthand to set position and type together. These ordered lists keep decimal markers and differ only in their placement.
<!-- decimal · outside --><ol id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:decimal|outside"> <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><!-- 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>Apply conditionally
Resize past sm to place decimal markers inside. The dedicated position property preserves their type. Print returns them outside.
<!-- Real viewport · position only --><ol id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:decimal|outside list-style-position:outside@print 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>