CSS <display-listitem> Data Type

The CSS <display-listitem> data type represents values that cause an element to generate a list-item box. A list item generates a principal box for its contents and a marker box, which is commonly displayed as a bullet, number, or other list marker.

Syntax

The <display-listitem> data type combines the list-item keyword with optional outer and inner display values:

<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item

When the optional values are omitted, list-item uses its default display behavior.

The list-item Value

The list-item keyword causes an element to generate a list-item box. In addition to the element's principal box, a marker box is generated and can be styled using list-related properties and the ::marker pseudo-element.

.item {
  display: list-item;
}

The value is commonly associated with HTML <li> elements, but it can be applied to other elements when list-item behavior is needed.

Combined Display Values

The list-item keyword can be combined with an outer display type and either flow or flow-root to describe the list item's display behavior more explicitly.

Example	Description
`list-item`	Creates a list-item box using the default outer and inner display behavior.
`block list-item`	Creates a block-level list item.
`inline list-item`	Creates an inline-level list item.
`block flow list-item`	Creates a block-level list item whose contents use flow layout.
`block flow-root list-item`	Creates a block-level list item whose contents use flow layout and establish a new block formatting context.

<display-listitem> Example

The following example applies display: list-item to ordinary <div> elements and changes their markers with list-style-type:

.example-item {
  display: list-item;
  margin-left: 30px;
  list-style-type: square;
}

Browser Result

First item

Second item

Third item

Each <div> generates a list-item box and a square marker even though the elements are not HTML <li> elements.

The <display-listitem> data type is used by the display property and works with CSS list properties that control the generated marker:

Specifications

The <display-listitem> data type is defined in the CSS Display Module Level 3 .

CSS <display-listitem> Data Type