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:

1. Create or save underline image
2. Upload image to your website media library
3. Add class (code below) to custom CSS section or Child Theme stylesheet
4. Add your image URL to background code in the CSS
5. Change color of desired text with WP editor or add <span></span> around the words you want to add the effect to
6. Add class (code below) to the span outlining the text
7. 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.

Download Sketch Line PNG File

Here’s the CSS I used: (note the background size is slightly adjusted from what’s shown in video)

.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:

• My Inspect Element Tutorial

Sites shown in video:

• Magnfi (with text underline effect)
• Basecamp (original effect inspiration)