1. Container mit Tag UL
2. in diesen Container Text mit Tag LI

Der Text wird dann automatisch mit einem Aufzähungzeichen versehen wird.

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.

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.

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.

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:

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!