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.


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.



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


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



Specification Status
CSS Display Module Level 3
The definition of 'display-listitem' in that specification.
Candidate Recommendation

Browser compatibility

Support of list-item

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
list-itemChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 7Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
Supported on <legend>Chrome Full support 71Edge Full support 79Firefox Full support 64IE No support NoOpera Full support 58Safari No support NoWebView Android Full support 71Chrome Android Full support 71Firefox Android Full support 64Opera Android Full support 50Safari iOS No support NoSamsung Internet Android Full support 10.0


Full support  
Full support
No support  
No support

See also