Breaking News

Next-Level List Bullets With CSS ::marker

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. 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 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: li { list-style-type: '> '; } 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 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. 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 I’ve 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 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! 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 let’s 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; } 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. 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: 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

No comments