How to add a paint stroke highlight to text using CSS in Divi

Feb 23, 2018

Highlighted text is super cool!

Highlighting text is a great way to draw attention to a certain word or area of a page, as well as looking really cool! Although basic highlighting is achievable through simple html, adding a brush stroke effect requires just a little bit of CSS.

Here’s a really simple breakdown of how you can achieve this same effect:

Step 1:
Download the paint stroke you’d like to use from this website: Free brush stroke banners

Step 2:
Upload the PNG file you’d like to use to your media library. (You could also use the SVG file, but as SVG is not natively supported by WordPress I’ll keep this tutorial simple and just use the PNG)

Step 3:
Add a text module to the page where you’d like to add the highlighted text. Make sure you’re on the “Text” tab of the text box, NOT the “Visual” tab.

Wrap the word you’d like to highlight in a <span> element with class “highlight”. It should look something like this:

<span class=”highlight”>Highlighted</span> text is super cool!

Step 4:

Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):

.highlight {
background: url(your image URL);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}

e.g.

.highlight {
background: url(https://andyhooke.co.uk/wp-content/uploads/2018/02/yellow-brushstroke.png);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}

And that’s it!

Let me know if you have any questions in the comment section below! You can also contact me directly via email at hello @ andyhooke.co.uk.

Does your website pass the grunt test?