Lists don’t have to be boring.

And with the new ::marker pseudo-element, making them interesting doesn’t have to be painful either. The browser support for this pseudo-element used to be spotty, but with its addition in Chrome 86, it’ll soon be universal.

I’m going to show you how to make your lists stand out.

We’re going to cover:

• Built-in list styles
• Changing the color of list markers
• Emoji list bullets
• CSS counters
• Custom image bullets
• Fully custom list markers using ::before

Built-In Styles

Let’s begin by changing the look of list markers using the built-in styles. We do so, by using the list-style-type property. There are a few style options for both ordered and unordered lists to choose from:

These are just the most common options. The full list can be found on MDN.

Custom Styles

The ::marker pseudo-element lets us change the style of the list marker (bullet/number). using a subset of CSS properties. The allowed properties are:

• All font properties (font-size, font-family etc.)
• color
• animation and transition properties
• direction, text-combine-upright, unicode-bidi
• and content

Let’s see what it can do.

🌈 Changing the Color

The most basic way to make your lists look better, is to change the color of the list markers. We can do that just like we would change the color of normal text.

Code at: https://gist.github.com/hadrysmateusz/4372de53d9de1c78363eeeaa54cb8a89

What if you need to support older browsers? You can apply the color to the li and wrap the text inside it in another element. Like this:

HTML

CSS

Or create a fully custom marker with ::before. More on that later.

#css #software-development #web-design #web-development #programming