List Styles Customisation

List Styles Customisation
Hi everyone, we are here with some good trick to customise the list i.e. ul’s bullet styles. This one is not the regular customisation that is done with the help of list-style css property.So let’s come to the List Styles Customisation.

To create the custom bullet styling; we will use the the pseudo elements as our preference but for fallback case, we can use span for the purpose. Let’s take the pseudo element and move ahead with the trick. For this we will use the before pseudo element of list item(li).

For first case lets consider that we want to use a plus(+) as our list bullet. So for that we will use :before pseudo element to create our list. So following is the HTML and CSS for that:

Which previews like this:

Customised bullets list preview

The pseudo elements have support over all major Desktop and mobile browsers but the Opera Mini. Following stats from MDN shows us clearly, when to use and when not to:

:before, ::before, :after, ::after support on mobile devices
:before, ::before, :after, ::after support on mobile devices

:before, ::before, :after, ::after support on desktops
:before, ::before, :after, ::after support on desktops

In more simpler stats

BrowserLowest VersionSupport of
Internet Explorer8.0`:pseudo-element`
9.0`:pseudo-element ::pseudo-element`
Firefox (Gecko)1.0 (1.0)`:pseudo-element`
1.0 (1.5)`:pseudo-element ::pseudo-element`
7.0`:pseudo-element ::pseudo-element`
Safari (WebKit)1.0 (85)`:pseudo-element ::pseudo-element`

Fallback Cases

So if the considered browser is not having support for pseudo elements; there is another solution for that. We can create an empty span tag which will be bullet for the list. And it can be customised in the similar way as the pseudo elements to generate our custom bullets. But the content property will not have same effect as on the pseudo elements, so the we will write the content explicitly in the span tags.

Gollowing is the gist to generate the sam preview but without the use of pseudo elements: