Display: list-item

The list-item display value comes from CSS 1, but it is really rare to see somebody playing with this one. So I created an exercise!

An exercise

We have to produce a centered list, where every item is separated with a bullet styled by the list-style property. The result must look like the following screenshot:

Honestly, the only interest of this exercise is to play with the list-item value. You can try to do it by yourself, but I will give my solution in this article.

What does list-item mean?

An element rendered as a list-item element will have the same behaviour than a block element. This value also generate a marker box, which will be styled by the list-style property.

In a browser's CSS default stylesheet, only li elements are rendered as list-item elements. But any element could be rendered as it, without parent tag restriction.

Inline list-item

To center a list, every item should be rendered as an inline element. By doing so, the bullets will not be displayed.

Display: list-item - demo 1 - https://tzi.fr

Add native bullets

To add native bullets, we have to add elements that will be rendered as list-item elements. To not break the horizontal flow, they have to be floating. Finally, to not have extra markup, we will use pseudo-elements.

Display: list-item - demo 2 - https://tzi.fr

Browser support

There is currently a bug on chrome since the version 29, all floating list-item element acts as list-style-position: outside. See the bug ticket. A proof that even CSS 1 could be complicated for browser.

No Internet Explorer currently support pseudo-elements rendered as a list-item, even IE 11.

Conclusion

The technique of the before pseudo-element rendered as a list-item could have been useful if it had IE support. For example, Xavier Zalawa proposed to use it to have a bullet with a different color than the text without extra markup.

Otherwise, the display: list-item value is rarely useful, but it helps us to understand how CSS works.

I saw sometimes (old) developers that automatically add a display: inline on their floating elements. The reason is to prevent IE6 bugs and does usually nothing wrong on other browsers. Be careful, that could be not true with a list-item element!

tl;dr

A li element have a bullet only if it has the display: list-item value.