# 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 finicky because of 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):

```css
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):

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

[Interactive example](/lists)

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

| Name         | Char | Unicode  |
| ------------ | ---- | -------- |
| Black Circle | ●    | `U+25CF` |

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

```css {8,11}
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:

[Interactive example](/lists)

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-unicode-characters) how to find that out).

Changing the bullet color is pretty obvious:

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

[Interactive example](/lists)

## 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.

| Name                                               | Char | Unicode  |
| -------------------------------------------------- | ---- | -------- |
| Single Right-Pointing Angle Quotation Mark         | ›    | `U+203A` |
| Right-Pointing Double Angle Quotation Mark         | »    | `U+00BB` |
| Heavy Right-Pointing Angle Quotation Mark Ornament | ❯    | `U+276F` |
| Medium Right-Pointing Angle Bracket Ornament       | ❭    | `U+276D` |

Demo:

[Interactive example](/lists)

### Check marks

| Name                   | Char | Unicode  |
| ---------------------- | ---- | -------- |
| Check Mark             | ✓    | `U+2713` |
| Heavy Check Mark Emoji | ✔    | `U+2714` |
| White Heavy Check Mark | ✅   | `U+2705` |

Demo:

[Interactive example](/lists)

### Arrows

| Name                                     | Char | Unicode  |
| ---------------------------------------- | ---- | -------- |
| Rightwards Arrow                         | →    | `U+2192` |
| Three-D Top-Lighted Rightwards Arrowhead | ➢    | `U+27A2` |
| Rightwards Arrow To Bar                  | ⇥    | `U+21E5` |

Demo:

[Interactive example](/lists)

### Hyphens

Em Dash lists set on Italic Georgia have that sublime early 2000s
[IDM](https://en.wikipedia.org/wiki/Intelligent_dance_music)/[Warp](https://warp.net/)/[Designer’s Republic](https://www.thedesignersrepublic.com/)/[Build Studio](https://studio.build/)
feel.

| Name          | Char | Unicode  |
| ------------- | ---- | -------- |
| Em Dash       | —    | `U+2014` |
| Hyphen Bullet | ⁃    | `U+2043` |
| Tilde         | ~    | `U+007E` |

Demo:

[Interactive example](/lists)

## How to find Unicode characters?

If you search for
[Unicode Character table](https://duckduckgo.com/?q=Unicode+Character+table&t=brave&ia=web)
you’ll find a lot of pages, none of them are official Unicode. One of the top
hits [unicode-table.com](https://unicode-table.com/en/) 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](https://unicode-table.com/en/1F602/) 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!