display: list-item
display: list-item gives an element list-item box behavior, including a marker. It can be useful when custom structures still need list-like presentation.
Overview
display: list-item gives an element list-item box behavior, including a marker. It can be useful when custom structures still need list-like presentation.
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.
Related links
Powered by web-features