Typography

list-style-image

Replacing the list item marker with an image.

Class	Declarations
`list-style-image:url(<…>)`	`list-style-image: url(<…>);`
`list-style-image:linear-gradient(<…>)`	`list-style-image: linear-gradient(<…>);`
`list-style-image:radial-gradient(<…>)`	`list-style-image: radial-gradient(<…>);`
`list-style-image:repeating-linear-gradient(<…>)`	`list-style-image: repeating-linear-gradient(<…>);`
`list-style-image:repeating-radial-gradient(<…>)`	`list-style-image: repeating-radial-gradient(<…>);`
`list-style-image:conic-gradient(<…>)`	`list-style-image: conic-gradient(<…>);`

Examples

Use list-style-image:url(*) when each list item should use an image marker.

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

Generated CSS

@layer utilities {    .list-style-image\:url\(\/marker\.svg\) {        list-style-image: url(/marker.svg)    }}

Gradient functions can also be used when a generated marker is more appropriate than an asset.

<ul class="list-style-image:linear-gradient(var(--color-blue-60)|var(--color-blue-40))">    <li>Gradient marker</li></ul>

Use list-style:disc or another type utility when image markers are not desired in a condition.

<ul class="list-style-image:url(/marker.svg) list-style:disc@print">    <li>Printable marker</li></ul>

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

<ul class="list-style-image:url(/marker.svg):hover list-style:disc@sm list-style:disc@print">...</ul>

Setting all the list style properties at once.

Setting the position of the list item marker.