Advertisement
  1. Web Design
  2. HTML/CSS
  3. HTML Templates

Next-Level List Bullets With CSS ::marker

Scroll to top

In this tutorial we’ll be working with the ::marker pseudo-element, which gives us styling access to the “marker box” on list items. We can then use it to replace default list bullets with icons, text, SVG; almost whatever we like! Let’s take a look.

What We’re Creating

Video Tutorial

The Structure of a List Item

Lists and list items have been around since HTML was first conceived, and whilst we’ve always been able to style them designers have never really paid much attention to their structure. List items have a bullet, and a bit of text, right?

Their official definition describes list items as comprising a principal block box, with a marker box to indicate a bullet.

li definitionli definitionli definition

To style list items what we usually do is remove the bullets and add extra elements (often pseudo-elements, or background images) to create our own.

custom list itemcustom list itemcustom list item

Nowadays, however, as part of the CSS pseudo-element module 4, we have a new element called marker to play with. This gives us direct access to the marker box (so direct access to the bullet) generated by the browser. 

Allowed CSS Marker Properties

We can use this direct access to style bullets to some extent. Currently there’s a limited number of properties available:

  • font-* properties
  • white-space
  • color
  • direction
  • content
  • animation
  • transition

We can’t currently use background styling, nor margin, padding, width, height etc. But even with the properties we do have, we can still create some pretty cool-looking bullets!

Browser Support

Browser Support is pretty good, with all major browsers supporting use of marker. And any older, non-supporting browsers will simply ignore any marker styling and display whatever default or fallback bullet styling is defined. So there’s no reason not to use marker!

List-style-type Example

I go over more examples in the video tutorial (as you can see from the demo) but for now I’d like to begin by demonstrating the “old” way of doing things.

We can use list-style-type to define what the bullet should be:

1
li {
2
 list-style-type: '> ';  
3
}

This will simply replace the bullet on our custom list items with a > . And we can put whatever text we like in this value. Even an emoji!

custom list itemscustom list itemscustom list items

We can also use the color property here to change the text of whatever text is in the marker box, and in the main block. This does, unfortunately, mean you can’t color each part separately.

Marker Example

Now let’s see how the marker pseudo-element can help us. In a similar example we can target the marker specifically by using li::marker.

1
li::marker {
2
    color: green;   
3
}

By changing the color in this way we change only the bullet, not the text within the list item.

Check out this example, where I’ve targeted all the ::marker elements, made them green, and then targeted just the second-child and made it large and blue.

second childsecond childsecond child

To change what the bullet itself is you can use the content: ''; property and add characters like we did in the first example with list-style-type . Again, emojis work too.

Non-List Items as List Items

It’s possible you’d like to display some of your elements as list items, even if that’s not what they are. For example, using the display property we can change the way a paragraph appears, and then target its ::marker too!

1
p {
2
 display: list-item;   
3
}
4
5
p::marker {
6
 content: '❤️';
7
}

Styling Ordered Lists

Ordered Lists can be manipulated just as well. Numbering is usually very important where ordered lists are used, so let’s jazz up our numbers by changing the content to a text string with the list-item counter appended to it:

1
ol li::marker {
2
    content: 'Step ' counter(list-item);
3
    color: green;
4
}
5
6
ol li:hover::marker {
7
    color : blue;
8
}

We’ve also added a hover style to this list, changing the color of the marker when the mouse cursor hovers over it. And to take that hover even further you can use transitions on the color too.

ordered listordered listordered list

You’ll notice the padding is cramped on these list items, and that’s because I removed all padding by default. To put that back, add it to the li element.

Using SVG as Marker

For our last example let’s use an SVG icon as the marker! We can do this by encoding an SVG as a Data URI (see this encoder to get you the code you want) and pasting it directly into the CSS like so:

1
li::marker {
2
    content: url("Data URI goes in here");
3
}

Conclusion

That should have given you a solid start for customizing your own list bullets with CSS! Let us know on social media what you manage to create.

Useful Resources

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.