How to Add Tick Marks to List in WordPress

A tick mark is a symbol that indicates the completion of an item on a list. It can be used in WordPress posts and pages to break up long lists into more manageable chunks, or it may serve as a signal to the reader that there are still items left on the list.

With a few lines of code, you can use Tick Marks to emphasize your points in WordPress. In this tutorial we’ll show how!

How to Add Tick Mark with CSS

With CSS we can transform a list’s item bullet to a better visualy display like a checkbox or tick mark.

<ul class="ticks">
  <li>WordPress is an open source platform</li>
  <li>It's free to use and easy to learn</li>
  <li>It has a large community of developers, designers, and bloggers who share their work with the world through blogs</li>
  <li>You can create your own website without any coding knowledge or expensive software like photoshop</li>
  <li>WordPress has many themes that are free for personal use or purchase that allow you to customize your site</li>
  <li>There are plugins (add-ons) available for every kind of functionality imaginable - from ecommerce sites to social media integration</li>

The following code removes the default disc bullet type of li tag then apply tick mark to its pseudo :before.

ul.ticks {
  list-style: none;

ul.ticks li:before {
  content: '\2705';

Apply Tick Mark to WordPress

In WordPress, you can place CSS in Theme Customizer, a post’s custom HTML block, and in css file of a theme.

In this post, we will use Theme Customizer for quick result. On the admin menu, access Customize then Additional CSS then paste the CSS block above. This section allow webmasters to input custom CSS without modifying any files.

Here’s an HTML decimal version you can use in the content part of li tag:

  • ☑ – \2705
  • ✓ – \2713
  • ☑ – \2611

4 thoughts on “How to Add Tick Marks to List in WordPress”

  1. Thanks. Is it possible to get a gap between the checkmark and text? For example, can I add a space in front of the code ‘\2705’;, like this:
    ul.ticks {
    list-style: none;

    ul.ticks li:before {
    content: ‘\2705’;

Leave a Comment

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

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.