Custom CSS Checkmark List in WordPress [Easy Method]

Here's how to add some nice checkmarks or tick mark graphics to your WordPress blog posts without having to add custom fonts or plugins. By not using custom-loaded fonts or plugins, we can edit the listicle graphics as we see fit and create them in CSS. Your site will load faster and perform better in Google's Core Web Vitals ranking factor.

The second reason to create list and headings icons and graphics in CSS code is that this helps make your lists or headings stand out. Bullet points are boring. Custom bullet points are cool. This also makes your listicle articles easier for people to consume. And it's a proven fact that people like to share listicle articles.

So what are you waiting for? Make your WordPress post headings and lists look amazing.

• unstyled, unordered list item – boring, same old bullet list icon

• custom CSS-styled list item – a cool, custom checkmark on a blue background that really stands out

Add this CSS code to the Additional CSS section in the WordPress Customizer.

Now, whenever you create a list and add your descriptor class, you will get really nice-looking checkboxes before each item.

ul.bluecheck li:before {
margin: 0 0 0 -40px;
list-style-type: none;
position: absolute;
color: #fff;
content: "\2713\0020";
font-size: 15px;
background: #83bf5d;
padding: 2px;
border-radius: 20px;
width: 30px;
text-align: center;
}

The above code targets unordered lists (generally represented by bullet points). If you want to target an H2 for example, change the first line to

h2.bluecheck:before

You can also specify the font family by adding font-family: followed by the font name.

Here's a h2 with a custom CSS blue tick

To add a checkmark or tick before any item (such as a list item), simply select the block in the Gutenberg editor and then make sure the sidebar is showing “block” instead of “post”. Scroll pass HTML anchor to Additional CSS class(es).

And add a descriptor for the list style. I use “greentick”. You can use whatever you like but make sure to change it in the CSS.

There you go. An quick way to create a cool CSS Checkmark List in WordPress without a single line of HTML code. Sure, we added CSS, but that's easy.

Have you made any cool styles with CSS for lists in WordPress? Let me know in the comments!