clubmate.fi

Simplest way to style list bullets with Unicode characters

Here’s a simple way to style lists in CSS, without touching the HTML or adding SVGs.

There’s tons of ways to make nice looking lists; simply add inline SVGs or good old jpeg inside a list item to change the bullet’s appearance. I find those be somewhat fidgety with their own alignment issues, which isn’t a big deal. But putting Unicode characters in pseudo elements, or using the native ::marker pseudo element sparks more joy, because of their simplicity.

Styling with ::marker pseudo element

There’s a handy pseudo element called ::marker that you can use to style the bullets in a list. It works on any element or pseudo-element set to display: list-item, this means it also works with the summary element, but that’s for another post.

The following properties can be styled using ::marker:

• All font properties
• white-space
• color
• text-combine-upright, unicode-bidi, and direction
• content
• animation and transition

Here are some styles for making the bullets larger (the first in the demo below):

ul {
  padding-left: 30px;
}
li {
  margin-bottom: 6px;
}
li::marker {
  color: DarkSlateGray;
  font-size: 140%;
}

And here’s how to use a custom character (the second example):

.ul {
  padding-left: 20px;
}
li {
  padding-left: 10px;
}
li::marker {
  content: '>';
}

Styling with ::before pseudo element

Use ::marker if you can, but if you can also use the ::before pseudo element, it gives you more styling options if you need to do something completely custom, or if you need to support really old browsers.

As an example let’s say we want to make a list that has bigger bullets, those look pretty cool, Slack among others uses them, it’s a cool little design details I think.

The idea is to remove the original list styling by setting list-style-type to none and provide our own bullet with a pseudo elements.

I’ve chosen to use the Unicode character called "black circle":

On a completely clean slate, setting the bullet and styling the list took the following lines of CSS:

ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 6px;
  padding-left: 18px;
  position: relative;}
li::before {
  content: '●';  left: 0;
  position: absolute;
}

This might vary depending on what existing styling you’ve got.

It looks something like this, the lines wrap like they should:

Changing the bullet color is pretty obvious:

li::before {
  color: red;  content: '●';
  left: 0;
  position: absolute;
}

Various bullet ideas

Some curated examples to get your juices flowing.

Quote marks and brackets

I think some of the quotation marks and brackets make nice looking bullets. For example this style might look nice in a sidebar navigation list etc.

Demo:

Check marks

Demo:

Arrows

Demo:

Hyphens

Em Dash lists set on Italic Georgia have that sublime early 2000s IDM/Warp/Designer’s Republic/Build Studio feel.

Demo:

How to find Unicode characters?

If you search for Unicode Character table you’ll find a lot of pages, none of them are official Unicode. One of the top hits unicode-table.com offers a really nice UI for exploring the Unicode’s multilingual plane.

How to know if a character is supported?

I’m not 100% sure... but for example unicode-table.com shows which Unicode version it was added in and when it happened.

Face with Tears of Joy was approved as part of Unicode 6.0 in 2010 and added to Emoji 1.0 in 2015.

From that you can take some guesses. Safe to say that in 2021 most devices support a standard deployed in 2015.

Conclusions

This way you hardly add any weight and very little complexity to your codebase. Now you just have to get your designer exited about unicode glyphs :)

Hope this was helpful, thanks for reading!