Having your text links highlighted can be a great way to get people exploring your website and let’s be honest if done right, can look pretty cool. You can Highlight Links in the Divi Text Module with CSS even if you are not a code ninja. You’ll see how with just a few lines of CSS code that you add a much more bespoke look to the links in the Divi Text module. 

Let’s take a look at what we will be building today.

Preview:

Video Tutorial

Setting it Up

Preparing Our Text Module for the Animated Highlights

The first thing we need to do before adding the CSS that will highlight the links in our Divi Text module is to make sure we either already have a page with a Text Module containing some links, or we need to create one. If you do not, go ahead and quickly create a page and add a Divi Text module to the page and add some text with at least one link.

Text Module Settings > Advanced Tab > CSS ID & Classes > Add CSS Class de-highlights

Save

Adding the CSS Code

Transforming the Links into Animated Highlights

So the CSS we need to add here will look for the Divi Text module on the page that has the class de-highlights assigned which we did in the previous step, then apply the CSS to the <a> tags in the module. Just add that class to any text module where you want the CSS applied.

Add a Code Module

Paste the Code below in the Code Box between opening and closing <style> tags

Save

Polishing the Design

Changing the Colors

You can easily customize this CSS to highlight your links in the Divi Text module to fit the colors of your brand. You’ll see that the comments in the code show you exactly where to adjust the colors. For a quick guide, check below:

Text Color

Initial: Line 5
Hover: Line 17

Line Color

Initial: Line 6 Change the second linear-gradient color values (both) to your desired color
Hover: Line 6 Change the first linear-gradient color values (both) to your desired color

Look at them fancy highlighted links over there…

Conclusion

Today was a little shorter than usual, but as you can see, dynamite comes in small packages. If you blog often or create content with a bunch of links, this is a great way to make things just that little bit cleaner and easy to identify your linked content.

If you found this guide on how to Highlight Links in the Divi Text Module with CSS helpful, please consider subscribing to our Youtube Channel, and as always, we love hearing your thoughts and suggestions in the comments below.

Until next time!