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:
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:
|Browser||Lowest Version||Support of|
|Firefox (Gecko)||1.0 (1.0)||`:pseudo-element`|
|1.0 (1.5)||`:pseudo-element ::pseudo-element`|
|Safari (WebKit)||1.0 (85)||`:pseudo-element ::pseudo-element`|
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: