TIL: CSS list-style-position property

The HTML list tag allows you to list ordered and unordered items. One major UI problem I had with list items is the position of the ::marker (bullet) pseudo-element in a list item.

The ::marker pseudo-element selects the marker box of a list item, which contains the list bullet or number to display the list item. This is used in tags like <li> and <summary> elements.

Sometimes, the list item's bullet has some left margin irregularities which make lists not so good looking with respect to the page's default spacing layout. I had to solve this by hacking the extra spacing and adding some left margin.

Today I learned about the CSS list-style-position property that sets the position of the ::marker relative to a list item and allows you to decide the position of the bullet.

list-style-position: inside

Here, the ::marker is the first element among the list item's contents; hence the bullet will be inside the list item.

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
  <li>Mango</li>
  <li>Grapes</li>
</ul>

ul {
  list-style-position: inside;
}

list-style-position: outside

Here the ::marker is outside the element's box; hence the bullet will be outside the list item. This is the default position of a list item.

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
  <li>Mango</li>
  <li>Grapes</li>
</ul>

ul{
  list-style-position: outside;
}

You can use some global syntax values.

list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;

Browser Support

src="https://caniuse.com/#search=list-style-position"