Add Checkmarks to your Unordered List Items

You have a regular unordered which shows with bullet points just like this:

HTML:

<ul>
 	<li>Apples</li>
 	<li>Oranges</li>
 	<li>Grapes</li>
</ul>

Result:

• Apples
• Oranges
• Grapes

The bullet points are ugly and the check marks would be so much more relevant. Here’s how to turn the bullet points into checks.

First, add a class like checkmark to the ul tag which will indicate when the checks should be applied.

HTML:

<ul class="checkmark">
 	<li>Apples</li>
 	<li>Oranges</li>
 	<li>Grapes</li>
</ul>

Next, add your CSS:

ul.checkmark {
  list-style: none;
  margin-left: 25px;
}

ul.checkmark li {
  line-height: 1.8;
  position: relative;
}

ul.checkmark li:before {
  color: #781fd7;
  content: '✓';
  font-weight: bold;
  left: -25px;
  position: absolute;
}

Here’s your result:

• Apples
• Oranges
• Grapes