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.

Examples

HTML

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

CSS

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

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Support of list-item

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
list-item 1 12 1 6 7 1
Supported on <legend> 71 79 64 No 58 No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
list-item ≤37 18 4 14 1 1.0
Supported on <legend> 71 71 64 50 No 10.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem