Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add Fancy Animated Text Link Underlines In Divi

Nelson Miller Profile Orange
In this tutorial I will show you how to add fancy text link underlines with CSS that animate on hover in Divi.

▶️ Please watch the video above to get all the exciting details! 👆

Copy And Paste The CSS Snippet Into Your Site

This tutorial only requires one step! Or maybe two, depending on how you count. The first part is copying the code below and pasting it into your site. The code will work out of the box on every text module, but if you want it to be more specific or more general, I’ll help you out.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*apply the link underline and other styling*/
.et_pb_text a {
	background-image: linear-gradient(120deg, #00d263 0%, #00d263 100%);
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: 0 100%;
	transition: background-size 0.25s ease-in-out;
	color: inherit !important;
	font-weight: bold;
}

/*animate the line into a background on hover*/
.et_pb_text a:hover {
	background-size: 100% 100%;
	color: #ffffff !important;
	transition: ease all .3s;
}

Change The Color

Obviously you can change any values in the code, but the main one you should change is the hex color. It is located in the first line twice, so be sure to change it both places. The color you choose will be both the underline and the background color that animates up when you hover over the links.

Modify The Selector

By default, the code targets only the Divi Text module. This is probably not enough to make every link on your site styled this way, so I suggest considering how to make it either more specific or more general by customizing the selector.

If you only want to target links in one specific module, replace the .et_pb_text with your own custom selector like .my-fancy-links and place the class into the module CSS field in the Advanced tab. 

If you want to target more links, you could handle this several ways. You could risk going super general, like just an a, but that will most likely be bad as it will target images, menus, buttons, and more. If you mainly want to target Divi modules, you could add more selectors separated by commas, like .et_pb_text, .et_pb_blub, .et_pb_testimonial, etc.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

5 Comments

Comments By Others

  1. Dave

    When I add the link it does not show up blue with no underline. I get a purple underline even with adding this code. How do I remove the purple underline on the link?

    Reply
    • Hemant Gaba

      Hi Dave!

      The code adds a green line under the text with the gradient property. There should not any purple line. Please check the border in Text module settings. If no border is preset, please share the page URL to investigate further.

      Reply
  2. Tasha

    I loved the results. Too bad it only works for Divi text modules. I don’t use Divi page building on my post, just special pages just in case something happens, I am not left with a website full of horrible codes. It has happened. So, at least I can have it on some of my pages!

    Reply
    • Geo

      Hello Tasha, if you need help customizing / targeting your CSS I can probably help out free of charge when I have the time (because I like what your site does).
      Reply here if you’re interested, and I’ll send you my contact details through the contact form in your site.
      Cheers.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart