About
This page is about the formatting of element seen as a list-item.
A list-item has:
- a principal block box (the normal box)
- and an additional box known as the marker box (the marker).
Properties
All properties applies to the marker box.
The list properties applies only if the display property is set list-item.
This is the default value of a li html element.
The CSS properties 1) used to design an element as a list item are:
- list-style-type specifies the marker
- list-style-position specifies if the marker is outside or inside the box. Values may be:
- outside (default)
- inside
- inherit
Marker
Icon
The marker may be replaced with a before content property
Example:
- Css:
ul {
list-style-type: none;
}
ul > li:before {
content: "- ";
}
- Html
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
- Output:
Position: Outside / Inside the box
list-style-position specify if the marker is outside or inside the box. Values may be:
- outside (default)
- inside
- inherit
Position: Horizontally
You can position the marker horizontally with the text-indent property
ul {
text-indent: 10em;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Numbering
You can add numbers to your list with:
- the ordererd list (ol element) (it adds a default numbering to the list)
- the list-style-type property set to decimal, upper-roman, …
- with the css counter facility
Default HTML with the ol element
With ordererd list (ol element) that sets the property list-style-type by default to decimal
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
With the list-style-type
With an upper romain ordererd list (ol element) that sets the property to list-style-type to decimal
ol {
list-style-type: upper-roman
}
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
With a counter
With a counter, you can ever go further
ol { counter-set: my-counter-name; }
li { display: block; }
li::before { content: counter(my-counter-name, upper-roman) ". "; counter-increment: my-counter-name }
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
How to create a numbered list with a div element
Div as list element
You can use a div element as list container and list item element.
.list-item {
display: list-item;
list-style-type: upper-roman;
}
<ol>
<div class="list-item">One</div>
<div class="list-item">Two</div>
<div class="list-item">Three</div>
</ol>
Div as list container
The only drawback is that you can't place the marker outside because there is no marker box when using a div element as list container
.list-item {
display: list-item;
list-style-position: inside;
list-style-type: upper-roman
}
<div>
<div class="list-item">One</div>
<div class="list-item">Two</div>
<div class="list-item">Three</div>
</div>