Custom unordered list markers, done right

In my post on styling list markers I mentioned that we now have proper control over list markers.

With ::marker we can control the colour and size of both ordered and unordered lists. We also have all the flexibility we’d ever need for ordered lists, which are typographical: colour, size, typeface, weight, etc. Unordered lists, on the other hand, are a bit more limited; other than colour and size, you’ve only got three shapes in list-style-type:

• A filled-in circle (disc)
• An outline of a circle (circle)
• A square (square)

Luckily, we can get really custom by using a unicode value instead of disc, circle or square. So, for example, if you wanted your bullets to be black, right-pointing triangles, you’d use:

ul {
  list-style-type: "\25B6";
}

Unfortunately, custom list markers aren’t supported in Safari, so for now it’s a nice progressive enhancement. We need a classic double declaration for Safari as, without the disc style before the Unicode style, Safari displays no markers at all:

ul {
  list-style-type: disc;
  list-style-type: "\25B6";
}

If you need those black, right-pointing arrows across all browsers, you can still do it the old fashioned way with the ::before pseudo element.