display: list-item 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
The result must look like the following screenshot:
Honestly, the only interest of this exercise is to play with the
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
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
But any element could be rendered as it, without parent tag restriction.
To center a list, every item should be rendered as an
By doing so, the bullets will not be displayed.
To add native bullets, we have to add elements that will be rendered as
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.