Chrome 155's symbols() Gives You Custom List Markers Without a Separate Rule

Chrome 155 introduced the CSS symbols() function. It lets you define an inline counter style, which means a custom list marker can be declared in the same place it is used.

Before this, a custom marker needed a separate counter-style rule with a name, and then a reference to that name. For a single list, that was more ceremony than it was worth, and most of us reached for a pseudo-element instead.

Our opinion is that this makes proper list markers practical for small touches: a branded dash, a tick for a feature list, or numbered steps with a distinctive character. Using real markers rather than fake ones keeps the list semantic, which is better for screen readers.

Keep markers simple and legible. A decorative symbol should support the content and not compete with it, and it must keep enough contrast to be seen.

Support is limited at the moment, so provide a normal marker as the fallback and let Chrome visitors have the nicer version.