This is a relatively simple tutorial, and even though we are going to use some mildly advanced CSS techniques, all you need to do is copy and paste the code, and change just a few lines. It also uses the standard UL LI HTML structure, instead of using DIVs, so it's much cleaner. Let's get right into how to change the standard bullet on an HTML list with CSS, and nothing more.

This will be the final product
Using only CSS
We can make the bullet whatever we want

For the reminder of this tutorial, we'll focus on making the standard list bullet into a checkmark symbol (). Keep in mind, you can change it to whatever you want, and we'll show you how to do that as well.

First, build out your list using HTML. Here's what that typically looks like.

<div id=newlist><ul>
<li>This will be the final product</li>
<li>Using only CSS</li>
<li class=othercheck>We can make the bullet whatever we want</li>
</ul></div>Code language: HTML, XML (xml)

Notice that we're wrapping the whole thing with a div with a unique id. This is only needed if you want to change the bulletpoints on specific lists. You may also notice that the last bullet has a custom class. This is done if you want an individual bullet to have a custom symbol.

Then, we're going to change the bullets into checkmarks (or anything else you want). This is done through css. First, we hide the bullets, then we reinsert a custom one using the CSS:Before pseudo element.

#newlist ul {
  list-style: none;
}
//* standard Unicode method *//

#newlist ul li:before {
content: "\2713";
color:#3740ff;
padding-right:5px;
}

//* if you use FA5 *//
#newlist ul li:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f14a";
color:#3740ff;
padding-right:5px;
}

#newlist .othercheck:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f4da";
color:#3740ff;
padding-right:5px;
}Code language: PHP (php)

There are a few things to note here. First, there are two methodes. One uses a unicode checks, and one uses Font Awesome checks. Standard Unicode, which looks like this in css \2713 and this in html ✓ is safe and will work on any device.

FontAwesome also uses unicode, but needs to be included on the site as it's essentially a 3rd party font. That's done through a <link> tag, or by font-face and self hosting (how to install FA5 on any site). But, with it comes a huge selection of icons, as pictured below:

This will be the final product
Using only CSS
We can make the bullet whatever we want

However you do it, using unicode and css :before to replace list bullets with whatever you want is a great way to spruce things up, and is pretty easy to get done as well. Be sure to include the padding, and specify the color!