list-style-image
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS-свойство list-style-image устанавливает изображение, используемое в качестве маркера списка.
Чаще, удобнее использовать общее свойство list-style.
Интерактивный пример
list-style-image: url("/shared-assets/images/examples/rocket.svg"); list-style-image: none; <section class="default-example" id="default-example"> <div> <p>NASA Notable Missions</p> <ul class="transition-all unhighlighted" id="example-element"> <li>Apollo</li> <li>Hubble</li> <li>Chandra</li> <li>Cassini-Huygens</li> <li>Spitzer</li> </ul> </div> </section> .default-example { font-size: 1.2rem; } #example-element { width: 100%; background: #be094b; color: white; } section { text-align: left; flex-direction: column; } hr { width: 50%; color: lightgray; margin: 0.5em; } .note { font-size: 0.8rem; } .note a { color: #009e5f; } @counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " "; } Примечание: Это свойство применяется к элементам списка, т.е. к элементам с display: list-item;<li>. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно <ol> или <ul>), что позволит применить его ко всем элементам списка.
Синтаксис
/* Ключевые слова */ list-style-image: none; /* <url> значения */ list-style-image: url("star-solid.gif"); /* Глобальные значения */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; Значения
<url>-
Расположение элемента для использования в качестве маркера.
none-
Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определённый в
list-style-type.
Формальный синтаксис
list-style-image =
<image> |
none
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Пример
HTML
<ul> <li>Item 1</li> <li>Item 2</li> </ul> CSS
ul { list-style-image: url("star-solid.gif"); } Результат
Спецификации
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # image-markers |
| Начальное значение | none |
|---|---|
| Применяется к | список элементов |
| Наследуется | да |
| Обработка значения | The keyword none or the computed <image> |
| Animation type | discrete |