clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Simplest way to style list bullets with Unicode characters

Filed under: UI components— Tagged with: CSS, HTML

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":

NameCharUnicode
Black CircleU+25CF

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:

If you serve your CSS files as UTF-8 you can just paste the character in as is, or you can also use a hex code point if that feels better \25CF (see below how to find that out).

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.

NameCharUnicode
Single Right-Pointing Angle Quotation MarkU+203A
Right-Pointing Double Angle Quotation Mark»U+00BB
Heavy Right-Pointing Angle Quotation Mark OrnamentU+276F
Medium Right-Pointing Angle Bracket OrnamentU+276D

Demo:

Check marks

NameCharUnicode
Check MarkU+2713
Heavy Check Mark EmojiU+2714
White Heavy Check MarkU+2705

Demo:

Arrows

NameCharUnicode
Rightwards ArrowU+2192
Three-D Top-Lighted Rightwards ArrowheadU+27A2
Rightwards Arrow To BarU+21E5

Demo:

Hyphens

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

NameCharUnicode
Em DashU+2014
Hyphen BulletU+2043
Tilde~U+007E

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!

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @intterne if you want to make a correction etc.

  • © 2022 Antti Hiljá
  • About
  • Follow my new Twitter account → @intterne
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!