How to make indented bullet points discs in CSS

January 24, 2021

By default, indented bullet points become dots and squares instead of solid bullets.

I wanted all the bullet points to stay as solid discs, because I think that it looks better:

image

First, here's the HTML for indented bullet points:

<ul>
  <li>one</li>

  <ul>
    <li>one a</li>
  </ul>

  <li>two</li>
</ul>

Then, you can use this CSS to style every bullet point as a solid circle (a "disc"):

li {
  list-style-type: disc;
}

Done! Now, ever bullet point will be the same solid disc, even if it's indented.

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!

Loading...