Burger mobile menu

CSS: ul custom bullet style with image

Piotr Elmanowski | Published: 3 May, 2018

When we code CSS for website or web app, quite often we need to provide custom look of bullets in UL list. Standard CSS rules give us not so many possibilities to do it. We have CSS rules like:

  • 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…

So only CSS rule “list-style-image” gives us possibility to define custom style of ul list bullets. Advantage of this method is easiness, but disadvantage is hard manipulation of that image.

Second, and in my opinion better, method is to use CSS pseudo-element “::before”. I will show now how to use both methods.

First of all, we must start from creating image. I advice to create it in size at least 64 x 64 px to be sure it will be displaied properly on all screen resolutions and devices. I have created my custom ul bullet in Inkscape, and you can see it below:

css custom ul list bullet

Method 1: CSS list-style-image rule

Let’s create some UL list in HTML:

HTML:

And add this very simple CSS code

CSS:

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. Let’s check, in my opinion, the best method how to do that 🙂

Method 2: CSS3 “::before” pseudo-element for custom style of UL bullets

As in previous method, we have the same list:

HTML:

But we write more sophisticated CSS code that do whole magic 🙂 Remember to use here our big 64 x 64 px image.

CSS:

Results:

CSS3 custom ul list bullets with paraelement

And as we can see on image above – we have custom 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 to:

  1. Clear left padding for UL list.
  2. Add left padding in LI element. We must provide space in each element of list.
  3. Add in LI element position: relative, it is needed to set right position of ::before pseudo-element bullet.
  4. Create “li::before” pseudo-element:
    1. Add property “content” – only with this property it will be appear.
    2. Add some dimensions, in my example 10×10 px.
    3. Set position to absolute – we must center it right place in LI element.
    4. Set background image with needed details like position or size.
    5. Set pseudo-element position by left/top and transform rule.

THE END 🙂

Do you know other methods to make custom UL list bullets in CSS? Share your ideas in comments below 🙂

Tags: , , ,


Scroll top
Loading
Zdjęcie w lewo Zdjęcie w prawo