list-style-position

Setting the position of the list item marker.

Overview

Examples

Place markers inside the content box

Use list-style:inside when markers should be part of the text block and align with wrapped lines.

<ul class="list-style:inside">    <li>Long item that wraps inside the same text block.</li></ul>

@layer utilities {    .list-style\:inside {        list-style: inside    }}

Keep markers outside

Use list-style:outside for the default marker placement outside the principal block box.

<ul class="list-style:outside">    <li>Marker outside</li></ul>

Combine with marker type

You can set position by itself or combine it with type using the list-style:*|* shorthand.

<ul class="list-style:decimal|inside">    <li>Step</li></ul>

Apply conditionally

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

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