list-style

Setting all the list style properties at once.

Overview

Examples

Set type and position together

Use list-style:*|* when list marker type and marker position belong together.

<ul class="list-style:disc|inside">    <li>Install</li>    <li>Configure</li></ul>

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

Use an image marker

Use list-style-image:url(*) when the marker should come from an image asset.

<ul class="list-style-image:url(/marker.svg)">    <li>Custom marker</li></ul>

Split longhands when variants differ

Use the type, position, and image pages when only one part of the list style changes across states.

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

Apply conditionally

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

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