How to remove bullets from a list in CSS?

Set list-style: none on the list, then reset its padding and margin. The bullets disappear with the first line, and the other two remove the indent and the space above and below.

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

<ul class="menu">
  <li><a href="/">Home</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

This works the same for <ul> and <ol>. Put list-style on the list itself, not on each <li>. It's inherited, so the items pick it up.

Where the indent comes from

Many people remove the bullets and are surprised the text is still pushed to the right. That indent isn't part of the bullet. Browsers give lists a default padding-inline-start: 40px (the left padding in left-to-right languages) to make room for the markers, and a top and bottom margin of 1em.

If you only want to remove the left indent and keep the vertical spacing, reset just that side:

.tags {
  list-style: none;
  padding-inline-start: 0;
}

Nested lists get their own default padding, so reset them too if needed, for example with .menu ul.

Horizontal lists

For a navigation bar, lay the items out with flexbox and gap:

.menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Good to know: bullets only appear on elements with display: list-item, which is the default for <li>. If you change the items themselves to display: flex or display: block, the bullets disappear too.

Safari and VoiceOver

When a list has list-style: none, Safari with VoiceOver may stop announcing it as a list. Users then don't hear "list, 3 items", which is useful context in navigation, search results or a list of steps.

When that matters, add role="list" to bring the semantics back:

<ul class="menu" role="list">
  <li><a href="/">Home</a></li>
  <li><a href="/blog">Blog</a></li>
</ul>

It looks redundant, but it's a deliberate workaround. You don't need to add role="listitem" to the items.

Customize the markers instead

Sometimes you don't want to remove the bullets, you just don't like how they look. list-style-type accepts a string, which becomes the marker:

.steps {
  list-style-type: '→ ';
}

The ::marker pseudo-element styles the marker without touching the text:

.features li::marker {
  color: #16a34a;
  font-weight: 700;
}

::marker only accepts a few properties, such as color, the font properties and content. Safari's support for it has been partial, so check Can I Use before relying on content there. For a custom symbol, the string value of list-style-type above is the safer option.

For anything more complex, like an icon in a colored circle, use list-style: none and draw the marker with li::before. In that case, keep the role="list" note above in mind.