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.