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).
xxxxxxxxxx1
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>