W3cubDocs

/CSS

display-listitem

The list-item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together with a principal box of the specified type for its own contents.

Syntax

A single value of list-item will cause the element to behave like a list item. This can be used together with list-style-type and list-style-position.

list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords.

Note: In browsers that support the two-value syntax, if no inner value is specified it will default to flow. If no outer value is specified, the principal box will have an outer display type of block.

Formal syntax

Syntax not found in DB!

Example

HTML

<div class="fake-list">I will display as a list item</div>

CSS

.fake-list {
  display: list-item;
  list-style-position: inside;
}

Result

Browser compatibilityUpdate compatibility data on GitHub

Support of `list-item`

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	12	1	6	7	1

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes	Yes	12	4	Yes	Yes	Yes