EN
CSS - ordered list style types
6 points
In this article, we would like to show you ordered list style types using pure CSS.
list-style-type: decimal; ![]() | list-style-type: decimal-leading-zero; ![]() |
list-style-type: lower-roman; ![]() | list-style-type: upper-roman; ![]() |
list-style-type: lower-greek; ![]() | list-style-type: lower-latin; ![]() |
list-style-type: upper-latin; ![]() | list-style-type: armenian; ![]() |
list-style-type: georgian; ![]() | list-style-type: lower-alpha; ![]() |
list-style-type: upper-alpha; ![]() |
In this section, we present runnable example with some of the most common unordered list style types (list-style-type
property).
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
font-size: 20px;
8
color: #1d6ab3;
9
display: flex;
10
flex-wrap: wrap;
11
}
12
13
body > div {
14
min-width: 220px;
15
}
16
17
</style>
18
</head>
19
<body>
20
21
<div>
22
<div>decimal</div>
23
<ol style="list-style-type: decimal">
24
<li>item</li><li>item</li><li>item</li>
25
</ol>
26
</div>
27
28
<div>
29
<div>decimal-leading-zero</div>
30
<ol style="list-style-type: decimal-leading-zero">
31
<li>item</li><li>item</li><li>item</li>
32
</ol>
33
</div>
34
35
<div>
36
<div>lower-roman</div>
37
<ol style="list-style-type: lower-roman">
38
<li>item</li><li>item</li><li>item</li>
39
</ol>
40
</div>
41
42
<div>
43
<div>upper-roman</div>
44
<ol style="list-style-type: upper-roman">
45
<li>item</li><li>item</li><li>item</li>
46
</ol>
47
</div>
48
49
<div>
50
<div>lower-greek</div>
51
<ol style="list-style-type: lower-greek">
52
<li>item</li><li>item</li><li>item</li>
53
</ol>
54
</div>
55
56
<div>
57
<div>lower-latin</div>
58
<ol style="list-style-type: lower-latin">
59
<li>item</li><li>item</li><li>item</li>
60
</ol>
61
</div>
62
63
<div>
64
<div>upper-latin</div>
65
<ol style="list-style-type: upper-latin">
66
<li>item</li><li>item</li><li>item</li>
67
</ol>
68
</div>
69
70
<div>
71
<div>armenian</div>
72
<ol style="list-style-type: armenian">
73
<li>item</li><li>item</li><li>item</li>
74
</ol>
75
</div>
76
77
<div>
78
<div>georgian</div>
79
<ol style="list-style-type: georgian">
80
<li>item</li><li>item</li><li>item</li>
81
</ol>
82
</div>
83
84
<div>
85
<div>lower-alpha</div>
86
<ol style="list-style-type: lower-alpha">
87
<li>item</li><li>item</li><li>item</li>
88
</ol>
89
</div>
90
91
<div>
92
<div>upper-alpha</div>
93
<ol style="list-style-type: upper-alpha">
94
<li>item</li><li>item</li><li>item</li>
95
</ol>
96
</div>
97
98
</body>
99
</html>