CSS - list-item (list formatting with marker box)

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:

The shorthand list property is list-style 2)

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:

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>

Support

List and Float


Powered by ComboStrap