How to use a tick or checkmark symbol (✓) instead of bullets in an unordered list with CSS?

Spread the love

Sometimes, we want to use a tick or checkmark symbol (✓) instead of bullets in an unordered list with CSS.

In this article, we’ll look at how to use a tick or checkmark symbol (✓) instead of bullets in an unordered list with CSS.

How to use a tick or checkmark symbol (✓) instead of bullets in an unordered list with CSS?

To use a tick or checkmark symbol (✓) instead of bullets in an unordered list with CSS, we set the content property.

For instance, we write

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

to add an unordered list.

Then we write

ul {
  list-style: none;
}

ul li:before {
  content: "✓";
}

to set content to "✓" to change the button to the checkmark.

Conclusion

To use a tick or checkmark symbol (✓) instead of bullets in an unordered list with CSS, we set the content property.

Leave a Reply

Your email address will not be published. Required fields are marked *