Box of bullets on a white background.
Photo by Timothy Dykes on Unsplash

Custom bullets for unordered lists

There are lots of ways to style lists, a quick google shows many different solutions. Check out these 10 creative CSS snippets to style up lists.

The design I needed to recreate was simple check marks. I used this codepen by Adam Orlov which contained exactly what I needed. First my simple HTML:

<ul>
  <li>This is my first point</li>
  <li>This is my second point, longer to test list wrapping. Note that wrapping preserves the indentation that bullets had!</li>
</ul>

Then add the CSS, which hides the default list style, and utilises pseudo elements to create our custom bullets:

* {
  box-sizing: border-box;
}
body {
  background-color: #edf2f7;
}

ul {
  list-style: none;
  padding: 10px;
}
li {
  position: relative;
  font-size: 20px;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 2em;
  height: 2em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

And if we want to change the colour of the check marks, simply add a fill colour to the li:before background svg like so:

/* Add fill='%2300FF00' */

li:before {
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' fill='%2300FF00' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>");
}

These are super adaptable and really easy to implement. I wanted to keep a note of them here so I can find it easily next time I need to edit bullet points!

Find the original stackoverflow post here.

A little digital blog, by a little analog person

© 2021 Ashley Chin