Syntax
list-style-image
Replacing the list item marker with an image.
Overview
| Class | Declarations |
|---|---|
list-style:url(`…`) | list-style-image: url(`…`);
|
list-style:linear-gradient(`…`) | list-style-image: linear-gradient(`…`);
|
list-style:radial-gradient(`…`) | list-style-image: radial-gradient(`…`);
|
list-style:repeating-linear-gradient(`…`) | list-style-image: repeating-linear-gradient(`…`);
|
list-style:repeating-radial-gradient(`…`) | list-style-image: repeating-radial-gradient(`…`);
|
list-style:conic-gradient(`…`) | list-style-image: conic-gradient(`…`);
|
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="list-style-image:url(…):hover list-style-image:url(…)@sm list-style-image:url(…)@dark list-style-image:url(…)@print">…</div>