display: list-item
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| CSS property | ||||||
list-item.legend-support Supported on `<legend>` | 71 | 79 | 64 | | 71 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.custom-item {
display: list-item;
list-style-type: disc;
margin-left: 1.5em;
}Live demo
Use cases
-
Custom list styling
Apply list-item behavior to elements inside a custom component while preserving marker rendering.
-
Mixed layout patterns
Blend list-style behavior into structures that need more layout control than plain lists.
Cautions
- display can imitate list visuals, but it does not replace the semantic value of real ul/ol/li markup.
- Marker behavior may still need careful styling and testing across browsers.
Accessibility
- Prefer native list elements when the content is truly a list so assistive technologies receive proper structure.