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.
Thomas ZILLIOX
Je suis un développeur CSS freelance sur Lyon.
En tant qu’expert CSS, on dit parfois que je suis
« l’homme qui murmure à l'oreille des chevrons ».
Je suis également le co-créateur de Zupple Escape Game Lyon qui propose une salle d’escape game, des jeux de piste, des team building, de nombreuses énigmes en ligne, et même un podcast. Une aventure extraordinaire, grâce à laquelle il n’y a pas deux jours qui se ressemblent.