How to create custom bullets for lists#

The ul element's li children can have three bullet styles out of the box.

  1. square bullet:
  • Apple
  • Book
HTML
CSS
JavaScript
<ul id="ul-0">
  <li>Apple</li>
  <li>Book</li>
</ul>
#ul-0 {
  list-style: square;
}
  1. disc bullet:
  • Apple
  • Book
HTML
CSS
JavaScript
<ul id="ul-1">
  <li>Apple</li>
  <li>Book</li>
</ul>
#ul-1 {
  list-style: disc;
}
  1. circle bullet:
  • Apple
  • Book
HTML
CSS
JavaScript
<ul id="ul-2">
  <li>Apple</li>
  <li>Book</li>
</ul>
#ul-2 {
  list-style: circle;
}

They are all set using the list-style property of the ul element using square, disc, and circle as the value, respectively.

While they make for good defaults, in general; they have a big problem - the size of the bullets and the font size of the li are tied together. You can't customize the size of the bullet independent of the li's font size.

Take look at this example:

  • Apple
  • Book
  • Apple
  • Book
HTML
CSS
JavaScript
<ul id="ul-a">
  <li>Apple</li>
  <li>Book</li>
</ul>

<ul id="ul-b">
  <li>Apple</li>
  <li>Book</li>
</ul>
#ul-a {
  list-style: square;
  font-size: 30px;
}

#ul-b {
  list-style: square;
  font-size: 10px;
}

What if you want to customize the bullet size and not let it grow with the li's font size?

Custom bullets using images#

You can specify an image for the ul element's list-style and use it as the bullet as shown in the following example.

  • Apple
  • Book
HTML
CSS
JavaScript
<ul id="ul-c">
  <li>Apple</li>
  <li>Book</li>
</ul>
#ul-c {
  list-style: url(https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg);
}

There is a problem with this method - you cannot resize the image loaded by list-style. However, the image size is independent of the font size of li.

There is a better way to use an image as the list's bullet.

Here is how to do it:

  • Apple
  • Book
HTML
CSS
JavaScript
<ul id="ul-d">
  <li>Apple</li>
  <li>Book</li>
</ul>
#ul-d {
  list-style: none;
  padding-left: 0;
}

#ul-d li {
  padding-left: 24px;
  background-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg);
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: top 6px left 5px;
}

As you can see, you can customize every aspect of the image which is used as the list's bullet.

Custom bullets without using images#

There may be situations where you would rather not use an image, and just want to use a custom character as the bullet.

That's possible too, and here is how you do it:

  • Apple
  • Book
HTML
CSS
JavaScript
<ul id="ul-e">
  <li>Apple</li>
  <li>Book</li>
</ul>
#ul-e {
  list-style: none;
  padding-left: 0;
}

#ul-e li::before {
  display: inline-block;
  margin: 0 5px;
  font-size: 10px;
  content: '\25A0';
  color: #ff0000;
}

Using this method, not only is it possible to customize the size of the bullet, we can also specify a custom color.

I have used the UTF character 25A0 (■) in the example above, if you want to use a circle, you could use the UTF character 25CF (●). Look up https://en.wikipedia.org/wiki/Geometric_Shapes for possible candidates for your use case. You could even use simple ASCII characters like +, *, - etc.

Summary#

Although it is not possible to customize the default list bullet style using CSS, there are several ways to implement custom bullets for list items, which can then be completely customized according to one's requirements.

References#

  1. MDN - ul
  2. MDN - list-style
Tweet this | Share on LinkedIn |