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: #cc0505;
content: ‘✓’;
font-weight: bold;
left: -25px;
position: absolute;
}

Here’s your result:

  • Apples
  • Oranges
  • Grapes

Write a Reply or Comment

Your email address will not be published.