display: list-item is a CSS display value that makes an element behave like a list item. This means the element generates a block box and a marker (like a bullet or number) as part of a list.

Key Points

1
Elements with display: list-item typically have a marker displayed before their content, similar to <li> elements in HTML lists.
2
The marker can be customized using the list-style-type, list-style-position, and list-style-image properties.
3
Even standalone elements (like <div> or <p>) can be styled as list items using display: list-item.
4
The element behaves as a block box, so width, height, padding, and margins can be applied like a block element.

Example: Using display: list-item

In this example, the <div> and <p> elements act like list items, showing bullets or numbers while keeping their block characteristics.

Best Practices

1
Use display: list-item when you want non-<li> elements to appear as list items without changing the HTML structure.
2
Combine with list-style properties to customize markers and positions.
3
Avoid using display: list-item for complex layouts — use it primarily for list-style presentation.

Scenario Questions

0-2 years experience

1We need a simple vertical menu where each item shows a bullet, but the container uses flexbox. How would you apply display: list-item to get the bullets while keeping the flex layout?
2If you set display: list-item on a <div>, what default styles does the browser add, and how does that affect margin collapsing with surrounding elements?

2-5 years experience

1Your team added display: flex to a <ul> and the list bullets disappeared. Explain why that happened and how you would fix it without removing the flex layout.
2A list inside a CSS grid cell is creating extra vertical space. The items are using display: list-item. How would you diagnose and resolve the spacing issue?
3You switched a set of inline tags to display: list-item to keep the markers, but it breaks on Safari. What could be causing the Safari issue and how would you address it?

5-8 years experience

1Our notification component needs default bullets for some items and custom icons for others, while still behaving like list items for screen readers. How would you structure the CSS, including display: list-item, to support both cases without duplicating styles?
2A large legacy codebase misuses display: list-item on many non‑semantic elements for visual styling. What strategy would you propose to refactor this at scale, preserving accessibility and minimizing regression risk?
3When rendering a virtualized infinite‑scroll list, each item must be a list-item for accessibility, but the container uses CSS Grid for performance. Discuss the trade‑offs and how display: list-item interacts with grid and virtualization.

8+ years experience

1We are moving to a micro‑frontend architecture and have a shared List component that currently applies display: list-item to a <div> to emulate bullets. What are the long‑term implications for accessibility, theming, and cross‑team consistency, and how would you redesign the component to avoid this misuse?
2Our roadmap includes deprecating native <ul>/<li> in favor of a component‑driven approach using CSS custom properties. How would you ensure the new components still meet WCAG list semantics, given that display: list-item can be applied to any element?

Follow-up Questions

How would you customize the bullet shape or color for a list-item?
What accessibility considerations arise when using display: list-item on non‑semantic elements?
Could you achieve the same visual effect with a ::before pseudo‑element, and what are the trade‑offs?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.