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:
::before
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.
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:
font
properties (font-size, font-family etc.)color
animation
and transition
propertiesdirection
, text-combine-upright
, unicode-bidi
content
Let’s see what it can do.
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