List Marker - how to Style๐Ÿ’…

^^this is a List Marker. These little visual denotations to literally mark an item, inside a list. They can be different in shape or form, like alpha-numeric characters, symbols such as discs / dashes, and even custom characters (if you so wish it to be).

And this is all great, and to most, this level of basic customisation out of the box for a list would be enough. But is it though? ๐Ÿค” For years, Developers would provide a hack in CSS to remove the List Marker, style something in it's place, and override it. It was convoluted, and a bit wild, but overtime we became over-reliant on it. Even now I still see it in use today.

List structure

    <li>List item

The HTML above is a basic List, unordered, with a single list item. But what if we wanted to customise the list marker using that hack, we would target the ::before pseudo-element of the List Item to override the marker using the content CSS property along with a bunch of other properties like display & background. As an example, let's say you wanted to customise your List Item with an image.... ๐Ÿ‘‡

li::before {
    content: '';
    display: inline-block;
    height: 25px;
    width: 25px;
    background-image: url('path-to-image.png');
    background-size: contain;
    background-repeat: no-repeat;

But now....(and actually since 2015 I believe ๐Ÿ˜…) we can just do this instead:

li::marker { 
  content: url('path-to-image.png'); 

From 7 lines of 1. Sure, you might argue it's not really down to only 1 because you might want to re-add those size property constrants or other CSS properties for extra customisation. But still, we now have a direct selector that we can use to customise those List Markers. ๐Ÿ‘๐Ÿ‘๐Ÿ‘The only caveat here is that the List Marker must have a display: list-item native to the pseudo-element itself or specified direct in our CSS.

Believe it or not, this really opens the door to continue adding value to your unique designs / branding persona on the web. The ::marker pseudo-element can even be animated in CSS. As with all pseudo-elements however, they are not natively part of the DOM and don't interact in the typical fashion that a normal Element would, hence the term pseudo, (as in....not genuine to the DOM ๐Ÿ™ˆ๐Ÿ™Š๐Ÿ™‰).

Extending Functionality across other HTML List / Group elements

Are you a fan of Description Lists and their respective nested children....or maybe you need to use a native HTML collapse element such as the Details & Summary combo? Well no sweat, ::marker will work for those too.

Example using it with Description Lists:

Here we have a Description List with a single nested Description Term, and a sibling Description Detail:

    <dd>Is the best holiday of the year. All of the spoops!</dd>

Now as it is highlighting the best holiday of the year. ๐Ÿ‘ป๐ŸŽƒ We can use some emojis to add some flair to it.

dt {
    display: list-item;

dt::marker {
    content: '๐Ÿ‘ป';

dd::marker {
    content: '๐ŸŽƒ';

If you want to see more of this in action, I have an old Codepen with some example, and even one example that takes an SVG as the List Marker, (I have it currently commented out as the SVG is massive ๐Ÿ™ˆ๐Ÿ˜…). In this codepen, I even have a Details element with a child Summary element doing some fun little things with a custom List Marker and content update depending on the open/closed state of the parent Details element, .....all being controlled in CSS. Crazy right? ๐Ÿคฏ Take a look:

Image from Gyazo

Happy Halloween ๐Ÿ˜ˆ๐Ÿ˜ˆ Spruce up your CSS with some custom List Markers. Share your own CSS tips and tricks too. ๐Ÿคœ

Avatar for Anthony O' Brien

Written by Anthony O' Brien

Software Developer using frontend base languages (HTML, CSS, JS) ๐Ÿ’…, Filemaker, and PHP. Working on procurement & compliance related apps in the HSE. โš• Online known as Auxfuse / Fuseโšก๐ŸŸ 


Fetching comments

Hey! ๐Ÿ‘‹

Got something to say?

or to leave a comment.