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!
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.
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
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.
To center a list, every item should be rendered as an
inline element. By doing so, the bullets will not be displayed.
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.
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.
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.
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
li element have a bullet only if it has the
display: list-item value.