CSS list markers are hard to style

When building the /latest timeline for this website I figued that I’d use different icon to quickly show the type of activity I had logged.

Since my timeline is nothing but a list of activities, I built it as an html ul > li list. It was only natural for me to use the list-style-image property to change the bullets to icons that matched what I needed.

I didn’t manage to vertically align the new bullets without breakign the list entirely. After running in circles for a while I stumbled upon CSS Trick’s post on ::markers. It turns out that the ::marker element is very limited:

Until ::marker adds support for more properties, web developers will often have no choice but to hide the marker and emulate it with a ::before pseudo-element.

Google’s own Creative List Styling post says:

Styling the ::before pseudo-element was a common way to create custom list markers before ::marker came along. But even now, it can allow us more flexibility, when we need it, for visually complex list styling.