Робота з маркерами списків ol на CSS

Маркери списку ul також змінюються за допомогою властивості list-style-type. Давайте подивимося, які значення воно може приймати для списку ol.

Значення lower-roman

Значення lower-roman робить замість звичайних цифр римські:

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-roman;
}

Значення upper-roman робить великі римські цифри:

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: upper-roman;
}

Значення lower-alpha робить нумерацію маленькими латинськими літерами:

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-alpha;
}

Значення upper-alpha робить нумерацію великими латинськими літерами:

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: upper-alpha;
}

Значення lower-greek робить нумерацію маленькими грецькими літерами:

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-greek;
}

Значення decimal-leading-zero робить нумерацію у вигляді чисел, але нулем попереду для цифр менше десяти:

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: decimal-leading-zero;
}