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!
Table of Contents
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>
</ul>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
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’;
}
Try using padding like this:
ul.ticks li:before {
content: ‘\2705’;
padding-right: 1rem;
}
I tried this, but not working for me.
Do i have to put the full code like \2705 or not?
Yes, ‘\2705’ (with backslash) is required.
You need to put “content: ‘\2705’;” for li:before.