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;



CSS Display Module Level 3
# typedef-display-listitem

Browser compatibility

BCD tables only load in the browser

See also