This page is about the formatting of element seen as a list-item.
A list-item has:
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:
The marker may be replaced with a before content property
Example:
ul {
list-style-type: none;
}
ul > li:before {
content: "- ";
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
list-style-position specify if the marker is outside or inside the box. Values may be:
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>
You can add numbers to your list with:
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 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, 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>
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>
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>