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 CSS properties ¹⁾ 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
• list-style-image

The shorthand list property is list-style ²⁾

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>

Support

List and Float

• https://paulbakaus.com/tutorials/css/block-formatting-contexts-and-lists/