The CSS property list-style-image takes a URL to an image, or an image-like CSS object (i.e. linear-gradient) and uses that as the list element’s “bullet-style”. This is great if you want to create a custom bullet for your lists. Sadly this property does not have the detail of other properties, like the cursor, which can not only take an image, but can take some information about the image, such as where to align the mid-point to, or how to scale the image up or down. The image you provide this property must be exactly the right image without any transformations. The two big things are sizing and then alignment. Sizing is pretty self-explanatory and you can pull that off with either software or an API. The alignment is a bit harder. You see the midpoint of the image’s Y-axis is aligned with the start of the list’s innerHTML. This means if your image is not aligned right it will appear askew. If the desired midpoint of your image is not at the middle of the Y-axis then you will need to pad the image at the top or bottom.

To easily facilitate this, I’ve written the small tool below which will let you select the midpoint of your image and then upon clicking it will correctly pad the image. Only after I’d created this tool did I find out that li suck and you should jsut use a ::before pseudo-element for the custom bullets or use a background with no-repeat. I will keep my little utility here though as it might be useful…