In this tutorial well 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! Lets take a look.
What Were Creating
Video Tutorial
The Structure of a List Item
Lists and list items have been around since HTML was first conceived, and whilst weve 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.
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.
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 theres a limited number of properties available:
- font-* properties
- white-space
- color
- direction
- content
- animation
- transition
We cant 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 theres 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 Id like to begin by demonstrating the old way of doing things.
We can use list-style-type to define what the bullet should be:
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!
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 cant color each part separately.
Marker Example
Now lets see how the marker pseudo-element can help us. In a similar example we can target the marker specifically by using li::marker.
li::marker { color: green; }By changing the color in this way we change only the bullet, not the text within the list item.
Check out this example, where Ive targeted all the ::marker elements, made them green, and then targeted just the second-child and made it large and blue.
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
Its possible youd like to display some of your elements as list items, even if thats not what they are. For example, using the display property we can change the way a paragraph appears, and then target its ::marker too!
p { display: list-item; } p::marker { content: '️'; }Styling Ordered Lists
Ordered Lists can be manipulated just as well. Numbering is usually very important where ordered lists are used, so lets jazz up our numbers by changing the content to a text string with the list-item counter appended to it:
ol li::marker { content: 'Step ' counter[list-item]; color: green; } ol li:hover::marker { color : blue; }Weve 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.
Youll notice the padding is cramped on these list items, and thats 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 lets 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:
li::marker { content: url["Data URI goes in here"]; }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
- CodePen Demo
- ::marker
- Browser Support
- HTML Lists