When we code CSS for website or web app, quite often we need to provide custom styles of bullets in UL list. Standard CSS rules give us not so many possibilities to do it.
Table of Contents
CSS rules to style bullets from UL
CSS rules to style bullets from UL list have limited possibilities, let’s check it:
- list-style – defines all properties for UL list (each listed below)
- list-style-position – defines position of bullet (marker) – inside or outside the list
- list-style-type – defines if we want to use circle, square etc…
- list-style-image – that’s what interest us now – this can be used to make a custom CSS styles of list bullets in UL
So only CSS rule “list-style-image” gives us possibility to define custom CSS style of UL list bullets. Advantage of this method is easiness, but disadvantage is hard manipulation of that image. So more or less – we are not defining in this method the custom styles, but we use custom image to place in the bullet list.
Second, and in my opinion better, method is to use CSS pseudo-element “::before”. I will show now how to use both methods. Let’s first describe better method of custom styling bullets from UL list, and secondly, worse method with image.
CSS custom bullet UL list with pseudo-element
Let’s create some UL list in HTML, it will be very simple:
HTML:
<ul class="custom-list"> <li>Dog</li> <li>Cat</li> <li>Monkey</li> <li>Lion</li> <li>Dragonfly</li> </ul>
But we write more sophisticated CSS code that do whole magic 🙂 Remember to use here our big 64 x 64 px image.
CSS:
.custom-list {
list-style: none;
padding-left: 0;
}
.custom-list li {
position: relative;
padding-left: 20px;
}
.custom-list li:before {
content: '';
width: 10px;
height: 10px;
position: absolute;
background-image: url('img/bullet.png');
background-size: cover;
background-position: center;
left: 0;
top: 50%;
transform: translateY(-50%);
}Results:
And as we can see on image above – we have custom UL bullets in good quality. And we can do any manipulation on that as we want, because bullets are fully independent elements which we can style however we want.
What is important in CSS code in example of custom UL list bullets:
- Clear left padding for UL list.
- Add left padding in LI element. We must provide space in each element of list.
- Add in LI element position: relative, it is needed to set right position of ::before pseudo-element bullet.
- Create “li::before” pseudo-element:
- Add property “content” – only with this property it will be appear.
- Add some dimensions, in my example 10×10 px.
- Set position to absolute – we must center it right place in LI element.
- Set background image with needed details like position or size.
- Set pseudo-element position by left/top and transform rule.
CSS custom bullet UL list with image
First of all, we must start from creating image which we will use to overlay native bullets. I advice to create it in size at least 64 x 64 px to be sure it will be displayed properly on all screen resolutions and devices. I have created my image of custom UL bullet in Inkscape, and you can see it below:
CSS list-style-image rule usage
HTML:
<ul class="custom-list"> <li>Dog</li> <li>Cat</li> <li>Monkey</li> <li>Lion</li> <li>Dragonfly</li> </ul>
And add this very simple CSS code
CSS:
.custom-list {
list-style-image: url('img/bullet.png');
}Results:
We can see that something went really wrong! For sure we have custom bullets, but we expected something much better, yeah?
There is no possibility to resize in CSS custom UL list image, to use bigger and better quality image but show it scaled. So we should now resize image and make it small, eg 10 x 10 px. But in the result we can have troubles on big HD screen, eg. Ultra HD.
Results with resized image into 10 x 10 px:
Yeah, now the size is correct, but we can see that quality is poor. As I said on the beginning, this method of preparing custom styles of UL list bullets IMHO is worse, and I recommend to use the first method described above 🙂
THE END 🙂
