How to Customize List Style for Each Item with CSS

Updated
3 min Read
CSS list-style and counter-style

A list is one of the most common design elements. It is useful not only for landing pages but is often utilized within articles and blog posts to make content easier to understand. And in CSS, lists are known as <ul> and <ol> - unordered and ordered.

And here is an example of what both of these list styles look like by default:

unordered - ul

  • This is
  • an
  • unordered list

ordered - ol

  1. This is
  2. an
  3. ordered list

And the associated code:

<!-- Unordered -->
<ul>
  <li>#1</li>
  <li>#2</li>
</ul>

<!-- Ordered -->
<ol>
  <li>#1</li>
  <li>#2</li>
</ol>

So, pretty basic stuff. The goal of this article, however, is to show you how to customize list styles, both for all items at once but also for each item individually. Let's start with all items at once.

Changing the style for an entire list

In CSS, styling lists can be done through the list-style shorthand property. With this property, you can change the appearance of the list by adding a custom style (e.g. an emoji), changing the list style to an image (static or GIF), and by changing the list position.

For full reference, check out the following MDN pages:

So, the next step is to actually put all this into practice. Let's do another ordered and unordered list, but this time with a custom emoji as the list-style.

unordered - ul

  • This list is
  • using the
  • Skull emoji

ordered - ol

  • And this list is
  • using the
  • Yin Yang emoji

And here is the code for this demo:

ul.skull-emoji {
	  list-style: "\1F480"; /* Unicode for Skull */
}

ol.balance-emoji {
	  list-style: "\262F"; /* Unicode for Yin & Yang */
}

/* you can also apply padding to each individual list by tagging list items (<li>) */

This method works with Glyphs, Unicode, directly imported Emojis, and images. It works fine by linking to images directly or by providing a base64 encoded string.

As you can see it's super easy to work with. So let's move on to learn how to use this same method but have each item in the list styled individually.

Changing the style for each item in the list separately

In order to apply a custom style to each individual item in the list, we're going to be using the @counter-style CSS property. There are a lot of variables that this property supports (MDN covers them all) but for this specific use case we're interested in system, symbols, and suffix.

  • system - lets you control the way in which list symbols are displayed.
  • symbols - lets you specify the custom icons/images/etc to use for the list.
  • suffix - specify a suffix to be appended after the symbol.

And here is a code example:

@counter-style custom-list {
  system: fixed; /* also supports cyclic, additive, symbolic, etc. */
  symbols: "\1F37F" "\1F363" "\1F368";
  suffix: "» "; /* this can be left empty if you don't want to append anything */
}

ol, ul {
  list-style: custom-list;
}

So, if we applied this to our new list, it would look like this:

  • first item
  • second item
  • third item
  • fourth item

As you see, it's working as intended. The three emojis are being used individually for each item in the list. However, the fourth item doesn't have an emoji and is instead showing a number. This is because we have set the system: fixed; specification.

If we go ahead and change from fixed to cyclic, then the list is going to look like this:

  • first item
  • second item
  • third item
  • fourth item

Awesome! Once our @counter-style specification runs out of symbols - it will simply reuse the first symbol in a cyclic (repetitive) fashion.

You can also play with this demo on CodePen and see what results you can achieve:

See the Pen Customize List Style for Each Item with CSS by Alex Ivanovs (@stackdiary) on CodePen.

And that's just about everything there is to it. Naturally, the symbols and list styles you wish to achieve are entirely dependent on your preference or design requirements.

Read also