How to Create a Custom Text Underline Effect
In this quick, fun tutorial, I’m going to show you how to create a custom text underline effect. I use this effect all the time when wanting accent a phrase or certain words inside a line of text or paragraph. It can be extremely handy for link conversion, UE (user engagement) or accenting an important phrase with a few words that “pop” out from the rest. And this method blows away doing a standard “text underline” text effect with HTML.
As I mentioned in the video, the client asked me to accentuate the 3 words in the example shown on Magnfi.com and I used the effect on Basecamp as an inspiration to help take those words to the next level. With just a little CSS and some tweaking of the underline image, you can create super cool sketch underlines for all your sites moving forward!
How to Create a Custom Text Underline Effect:
- Create or save underline image
- Upload image to your website media library
- Add class (code below) to custom CSS section or Child Theme stylesheet
- Add your image URL to background code in the CSS
- Change color of desired text with WP editor or add <span></span> around the words you want to add the effect to
- Add class (code below) to the span outlining the text
- Enjoy your sweet new text effect!
A few notes:
- You’ll need to use photoshop or another art program to edit the color of the underline image.
- You can use a different image entirely if you’d like to create a different look but the method will remain the same.
Like this tutorial? You’ll love my CSS Course.
Use coupon code “CSS30” for $30 OFF at checkout!
.sketch-underline { background: url(ENTER IMAGE URL PATH HERE) bottom left no-repeat; background-size: 100% 10px; padding-bottom: 8px; }
Text shown in video with underline effect: (Once class is in, use this as your starting text and adjust color as needed.)
Get the <span class="sketch-underline" style="color: #ec433d;"><em><strong>Best Divi Resources</strong></em></span> from our friends.
Links mentioned in the video:
Sites shown in video:

Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Great tutorial as always, Josh! That’s a great effect. It’s a very simple and clean (yet effective) way to spice up the page and draw attention to a feature or headline. Love it!
Thank you fine sir!
Good one! Thanks Josh!
Another great one Josh. Thanks for all your great work!
Another Great video!! Thank you for sharing your experience.
This was super helpful, and really clear, thank you so much!
Thanks for keeping this up. Had a client ask me for an underline effect this evening and I knew you had done a tutorial on it. You are the best Josh.