CSS :: Свойство list-style-image

css-свойство list-style-image (от англ. image – изображение) позволяет использовать изображения в качестве маркеров в пунктах списка.

Характеристики

Значение по умолчанию: none.
Применяется: к элементам <li>, <ol>, <ul>, а также ко всем элементам, у которых значение display установлено в list-item.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.listStyleImage="value".

Синтаксис

list-style-image: none | url(<адрес>)

Значения

url – относительный или абсолютный путь к файлу изображения, указываемый в скобках с использованием одиночных или двойных кавычек или без них, например, {list-style-image: url("http://html.net/image_1.png")}.
none – указывает браузеру, что следует применять стандартный маркер вместо изображения.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-lists-3/#image-markers

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/list-style-image

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		ul{
		width: 500px;
		margin: 2em;
		padding: 0px;
		background-color: #009900;		
		}
	
		.list_2	{
		list-style-position: inside;
		list-style-type: decimal;
		}
		
		.list_3{
		list-style-position: outside;
		list-style-image: url("circle_orange.png");
		}
		
		.list_4{
		list-style-position: inside;
		list-style-type: square;
		}
		
		.list_5{
		list-style: decimal inside;
		}		
		
		.list_6{
		list-style: outside url("circle_orange.png");
		}			
		
	</style>
	
</head>
<body>

	<ul>
	
		<li>
			Все значения по умолчанию.<br><br>
		</li>
	
		<li class="list_2">
			list-style-position: inside;<br>
			list-style-type: decimal;<br><br>
		</li>
		
		<li class="list_3">
			list-style-position: outside;<br>
			list-style-image: url("circle_orange.png");<br><br>
		</li>
		
		<li class="list_4">
			list-style-position: inside;<br>
			list-style-type: square;<br><br>
		</li>
		
		<li class="list_5">
			list-style: decimal inside;<br><br>
		</li>
		
		<li class="list_6">
			list-style: outside url("circle_orange.png");
		</li>
		
	</ul>
	
</body>
</html>

Пример №1