Everything You Need to Know About the Gap After the List Marker
Tags: article, liststyle, lists, marker
Published: 2023-08-21 21:02:30

---
title: Everything You Need to Know About the Gap After the List Marker
published: true
date: 2023-03-02 18:20:03 UTC
tags: Article,liststyle,lists,marker
canonical_url: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/
---

I was reading [“Creative List Styling”](https://web.dev/creative-list-styling/) on Google’s web.dev blog and noticed something odd in one of the code examples in the `::marker` section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The `::marker` pseudo-element allows us to style these markers or replace them with a custom character or image.

```
::marker {
  content: url('/marker.svg') ' ';
}
```

The example that caught my attention uses an SVG icon as a custom marker for the list items. But there’s also a single space character (`" "`) in the CSS value next to the `url()` function. The purpose of this space seems to be to insert a gap after the custom marker.

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/svg-marker-and-space.png?resize=1373%2C843&ssl=1)

When I saw this code, I immediately wondered if there was a better way to create the gap. Appending a space to `content` feels more like a workaround than the optimal solution. CSS provides `margin` and `padding` and other standard ways to space out elements on the page. Could none of these properties be used in this situation?

First, I tried to substitute the space character with a proper margin:

```
::marker {
  content: url('/marker.svg');
  margin-right: 1ch;
}
```

This didn’t work. As it turns out, `::marker` only supports a [small set of mostly text-related CSS properties](https://drafts.csswg.org/css-lists-3/#marker-properties). For example, you can change the `font-size` and `color` of the marker, and define a custom marker by setting `content` to a string or URL, as shown above. But the `margin` and `padding` properties are [not supported](https://github.com/w3c/csswg-drafts/issues/4571), so setting them has no effect. **What a disappointment.**

Could it really be that a space character is the only way to insert a gap after a custom marker? I needed to find out. As I researched this topic, I made a few interesting discoveries that I’d like to share in this article.

### Adding padding and margins

First, let’s confirm what `margin` and `padding` do on the `<ul>` and `<li>` elements. I’ve created a test page for this purpose. Drag the relevant sliders and observe the effect on the spacing on each side of the list marker. Tip: Use the Reset button liberally to reset all controls to their initial values.

<iframe id="cp_embed_rNrdXWB" src="//codepen.io/anon/embed/rNrdXWB?height=615&amp;theme-id=1&amp;slug-hash=rNrdXWB&amp;default-tab=result" height="615" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed rNrdXWB" title="CodePen Embed rNrdXWB" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe>

**Note:** Browsers apply a default `padding-inline-left` of `40px` to `<ol>` and `<ul>` elements. The logical `padding-inline-left` property is equivalent to the physical `padding-left` property in writing systems with a left-to-right inline direction. In this article, I’m going to use physical properties for the sake of simplicity.

As you can see, `padding-left` on `<li>` increases the gap after the list marker. The other three properties control the spacing to the left of the marker, in other words, the indentation of the list item.

Notice that even when the list item’s `padding-left` is `0px`, there is still a minimum gap after the marker. This gap cannot be decreased with `margin` or `padding`. The exact length of the minimum gap depends on the browser.

![First three properties: UL margin-left, UL padding-left, LI margin-left. Fourth property: LI padding-left.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/margin-padding-position-outside.png?resize=1417%2C890&ssl=1)
_The first three properties push the entire list item (including the marker) to the right. The fourth property pushes only the list item’s content to the right._

To sum up, the list item’s content is positioned at a browser-specific minimum distance from the marker, and this gap can be further increased by adding a `padding-left` to `<li>`.

Next, let’s see what happens when we position the marker _inside_ the list item.

### Moving the marker inside the list item

The `list-style-position` property accepts two keywords: `outside`, which is the default, and `inside`, which moves the marker inside the list item. The latter is useful for creating designs with full-width list items.

![A grocery list. Each item has a thin bottom border that extends from the left to the right edge of the list.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/list-marker-position-inside.png?resize=1608%2C918&ssl=1)
_The list marker is positioned inside the list item, so that the list item’s bottom border can extend to the left edge of the list box_

If the marker is now _inside_ the list item, does this mean that `padding-left` on `<li>` no longer increases the gap after the marker? Let’s find out. On my test page, turn on `list-style-position: inside` via the checkbox. How are the four `padding` and `margin` properties affected by this change?

As you can see, `padding-left` on `<li>` now increases the spacing to the _left_ of the marker. This means that we’ve lost the ability to increase the gap after the marker. In this situation, it would be useful to be able to add `margin-right` to the `::marker` itself, but that doesn’t work, as we’ve established above.

![The four properties: UL margin-left, UL padding-left, LI margin-left, LI padding-left.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/margin-padding-position-inside.png?resize=1417%2C889&ssl=1)
_All four properties push the entire list item to the right. The minimum gap cannot be increased by standard means._

Additionally, there’s a [bug in Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=725972) that causes the gap after the marker to _triple_ after switching to `inside` positioning. By default, the length of the gap is about one-third of the text size. So at a default `font-size` of `16px`, the gap is about `5.5px`. After switching to `inside`, the gap grows to the full `16px` in Chrome. This bug affects the `disc`, `circle`, and `square` markers, but [not ordinal number markers](https://twitter.com/g16n/status/1616807361061978118).

The following image shows the default rendering of outside and inside-positioned list markers across three major browsers on macOS. For your convenience, I’ve horizontally aligned all list items on their markers to make it easier to compare the differences in gap sizes.

![Six list items with varying gaps between the marker and text.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/outside-inside-gap-difference.png?resize=555%2C385&ssl=1)
_Only Firefox maintains the same gap size between the two marker positioning modes. This can be considered a browser interoperability (interop) issue._

To sum up, switching to `list-style-position: inside` introduces two problems. We can no longer increase the gap via `padding-left` on `<li>`, and the gap size is inconsistent between browsers.

Finally, let’s see what happens when we replace the default list marker with a custom marker.

### Switching to a custom marker

There are two ways to define a [custom marker](https://css-tricks.com/css-counters-custom-list-number-styling/):

- `list-style-type` and `list-style-image` properties
- `content` property on the `::marker` pseudo-element

The `content` property is more powerful. For example, it allows us to use the `counter()` function to access the list item’s ordinal number (the [implicit `list-item` counter](https://drafts.csswg.org/css-lists-3/#list-item-counter)) and decorate it with custom strings.

<iframe id="cp_embed_RwBQjvZ" src="//codepen.io/anon/embed/RwBQjvZ?height=350&amp;theme-id=1&amp;slug-hash=RwBQjvZ&amp;default-tab=css,result" height="350" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed RwBQjvZ" title="CodePen Embed RwBQjvZ" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe>

Unfortunately, Safari doesn’t support the `content` property on `::marker` yet ([WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=204163)). For this reason, I’m going to use the `list-style-type` property to define the custom marker. You can still use the `::marker` selector to style the custom marker declared via `list-style-type`. That aspect of `::marker` is supported in Safari.

<iframe id="cp_embed_ZEjXOwL" src="//codepen.io/anon/embed/ZEjXOwL?height=350&amp;theme-id=1&amp;slug-hash=ZEjXOwL&amp;default-tab=css,result" height="350" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed ZEjXOwL" title="CodePen Embed ZEjXOwL" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe>

Any Unicode character can potentially serve as a custom list marker, but only a small set of characters actually have “Bullet” in their official name, so I thought I’d compile them here for reference.

| Character | Name | Code point | CSS keyword |
| --- | --- | --- | --- |
| • | Bullet | `U+2022` | `disc` |
| ‣ | Triangular Bullet | `U+2023` | |
| ⁃ | Hyphen Bullet | `U+2043` | |
| ⁌ | Black Leftwards Bullet | `U+204C` | |
| ⁍ | Black Rightwards Bullet | `U+204D` | |
| ◘ | Inverse Bullet | `U+25D8` | |
| ◦ | White Bullet | `U+25E6` | `circle` |
| ☙ | Reversed Rotated Floral Heart Bullet | `U+2619` | |
| ❥ | Rotated Heavy Black Heart Bullet | `U+2765` | |
| ❧ | Rotated Floral Heart Bullet | `U+2767` | |
| ⦾ | Circled White Bullet | `U+29BE` | |
| ⦿ | Circled Bullet | `U+29BF` | |

**Note:** The CSS `square` keyword does not have a corresponding “Bullet” character in Unicode. The character that comes closest is the Black Small Square (▪️) emoji (`U+25AA`).

Now let’s see what happens when we replace the default list marker with `list-style-type: "•"` (`U+2022` Bullet). This is the same character as the default bullet, so there shouldn’t be any major rendering differences. On my test page, turn on the `list-style-type` option and observe any changes to the marker.

As you can see, there are two significant changes:

1. There is no longer a minimum gap after the marker.
2. The bullet has become smaller, as if it were rendered at a smaller `font-size`.

According to [CSS Counter Styles Level 3](https://drafts.csswg.org/css-counter-styles-3/#simple-symbolic), the default list marker (`disc`) should be “similar to • `U+2022` BULLET”. It seems that browsers increase the size of the default bullet to make it more legible. Firefox even uses a special font, `-moz-bullet-font`, for the marker.

![:marker selected in the inspector. Fonts used: -moz-bullet-font.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/firefox-moz-bullet-font.png?resize=1024%2C612&ssl=1)
_The “Fonts” pane in Firefox’s DOM inspector reveals the special font._

Can the small size problem be fixed with CSS? On my test page, turn on marker styling and observe what happens when you change the `font-size`, `line-height`, and `font-family` of the marker.

As you can see, increasing the `font-size` causes the custom marker to become vertically misaligned, and this cannot be corrected by decreasing the `line-height`. The `vertical-align` property, which could easily fix this problem, is not supported on `::marker`.

But did you notice that changing the `font-family` can cause the marker to become bigger? Try setting it to `Tahoma`. This could potentially be a good-enough workaround for the small-size problem, although I haven’t tested which font works best across the major browsers and operating systems.

You may also have noticed that the Chromium bug doesn’t occur anymore when you position the marker inside the list item. This means that a custom marker can serve as a workaround for this bug. And this leads me to the main problem, and the reason why I started researching this topic. **If you define a custom marker and position it inside the list item, there is no gap after the marker and no way to insert a gap by standard means.**

1. There is no minimum gap after custom markers.
2. `::marker` doesn’t support `padding` or `margin`.
3. `padding-left` on `<li>` doesn’t increase the gap, since the marker is positioned `inside`.

### Summary

Here’s a summary of all the key facts that I’ve mentioned in the article:

1. Browsers apply a default `padding-inline-start` of `40px` to `<ul>` and `<ol>` elements.
2. There is a minimum gap after built-in list markers (`disc`, `decimal`, etc.). There is no minimum gap after custom markers (string or URL).
3. The length of the gap can be increased by adding a `padding-left` to `<ul>`, but only if the marker is positioned outside the list item (the default mode).
4. Custom string markers have a smaller default size than built-in markers. Changing the `font-family` on `::marker` can increase their size.

### Conclusion

Looking back at the code example from the beginning of the article, I think I understand now why there’s a space character in the `content` value. There is just no better way to insert a gap after the SVG marker. It’s a workaround that is needed because no amount of `margin` and `padding` can create a gap after a custom marker that is positioned inside the list item. A `margin-right` on `::marker` could easily do it, but that is not supported.

Until `::marker` adds support for more properties, web developers will often have no choice but to hide the marker and emulate it with a `::before` pseudo-element. I had to do that myself recently because I couldn’t change the marker’s `background-color`. Hopefully, we won’t have to wait too long for a more powerful `::marker` pseudo-element.

<iframe id="cp_embed_YzjrGGM" src="//codepen.io/anon/embed/YzjrGGM?height=350&amp;theme-id=1&amp;slug-hash=YzjrGGM&amp;default-tab=css,result" height="350" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed YzjrGGM" title="CodePen Embed YzjrGGM" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe>

* * *

<small><a rel="nofollow" href="https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/">Everything You Need to Know About the Gap After the List Marker</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</small>