We can combine list-style-image with svgs, which we can inline in css! This method offers incredible control over the "bullets", which can become anything.
To get a red circle, just use the following css:
ul {
list-style-image: url('data:image/svg+xml,');
}
But this is just the beginning. This allows us to do any crazy thing we want with those bullets. circles or rectangles are easy, but anything you can draw with svg you can stick in there! Check out the bullseye example below:
ul {
list-style-image: url('data:image/svg+xml,');
}
ul ul {
list-style-image: url('data:image/svg+xml,');
}
ul ul ul {
list-style-image: url('data:image/svg+xml,');
}
ul ul ul ul {
list-style-image: url('data:image/svg+xml,');
}
ul.bulls-eye {
list-style-image: url('data:image/svg+xml,');
}
ul.multi-color {
list-style-image: url('data:image/svg+xml,');
}
Big circles!
- Big rectangles!
- b
- Small circles!
- c
- Small rectangles!
- b
- b
- Bulls
- eyes.
- Multi
- color
Width/height attributes
Some browsers require width and height attributes to be set on the , or they display nothing. At time of writing, recent versions of Firefox exhibit this problem. I've set both attributes in the examples.
Encodings
A recent comment reminded me of encodings for the data-uri. This was a pain-point for me recently, and I can share a bit of information I've researched.
The data-uri spec, which references the URI spec, says that the svg should be encoded according to the URI spec. That means all sorts of characters should be encoded, eg < becomes %3C.
Some sources suggest base64 encoding, which should fix encoding issues, however it will unnecessarily increase the size of the SVG, whereas URI encoding will not. I recommend URI encoding.
More info: