list-style-image
En esta página
| Clase | Propiedades CSS |
|---|---|
list-image-[<value>] |
list-style-image: <value>; |
list-image-(<custom-property>) |
list-style-image: var(<custom-property>); |
list-image-none |
list-style-image: none; |
Examples#
Basic example#
Use the list-image-[<value>] syntax to control the marker image for list items:
{
- 5 cups chopped Porcini mushrooms
- 1/2 cup of olive oil
- 3lb of celery
<!-- [!code classes:list-image-[url(/img/checkmark.png)]] -->
<ul class="list-image-[url(/img/checkmark.png)]">
<li>5 cups chopped Porcini mushrooms</li>
<!-- ... -->
</ul>
Using a CSS variable#
Use the list-image-{'( syntax to control the marker image for list items using a CSS variable:
<!-- [!code classes:list-image-(--my-list-image)] -->
<ul class="list-image-(--my-list-image)">
<!-- ... -->
</ul>
This is just a shorthand for list-image-{'[var( that adds the var() function for you automatically.
Removing a marker image#
Use the list-image-none utility to remove an existing marker image from list items:
<!-- [!code classes:list-image-none] -->
<ul class="list-image-none">
<!-- ... -->
</ul>