<display-listitem>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

<display-outside> =
block |
inline |
run-in

Examples

HTML

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

CSS

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

Result

Specifications

Specification
CSS Display Module Level 3
# typedef-display-listitem

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-item
Supported on <legend>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

See also