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.
<display-listitem>
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
Specification |
---|
CSS Display Module Level 3 # typedef-display-listitem |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
display-listitem |
1
|
12
|
1
|
6
|
7
|
1
|
≤37
|
18
|
4
|
14
|
1
|
1.0
|
legend-support |
71
|
79
|
64
|
No
|
58
|
No
|
71
|
71
|
64
|
50
|
No
|
10.0
|
Support of list-item
BCD tables only load in the browser
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem