list-style

li.test { list-style: decimal inside;}
li.test1 { list-style: url(/sample.png) inside;}

<ul style="list-style: decimal inside;">
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
</ul>

<ul style="list-style: url(/dics/dictionary-css/img/list-style-image_1.png) inside;">
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
</ul>

※ This sample uses the following image (30px wide, 30px tall).

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7+ ○

6 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

Specifies multiple marker-related properties for li elements (and elements with 'display' set to 'list-item' or 'inline-list-item') in a single declaration. The three properties that can be specified together are the 'list-style-type' property, the 'list-style-image' property, and the 'list-style-position' property. The values can be specified in any order.

When the 'list-style' property is written, any unspecified values are reset to their initial values. Note that any 'list-style-type', 'list-style-image', or 'list-style-position' properties written before 'list-style' will be overwritten.

<ul style="list-style-image: url(/dics/dictionary-css/img/list-style-image_1.png); list-style: inside;">
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
</ul>

Note that when both 'list-style-type' and 'list-style-image' are specified at the same time, the value of 'list-style-image' takes priority.