Automatic Link Styling
Anyone who has been on this website before has probably already seen the link styling that I am going to show you. If you are new here, you should definitely go browse hundreds of Divi tutorials on our site. See what I did there? Since I already have the code added, I simply select some text and paste a URL, and it automatically gets styled this way. In this tutorial I will show you how to add this fancy text link underline affect with CSS that animates 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.
This tutorial is amazing. Thank you so much. How can I apply this to the navigation and to the absolute links?
Hi Carolina!
Please use the code to Post navigation module:
.et_pb_posts_nav 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_posts_nav a:hover {
background-size: 100% 100%;
color: #ffffff !important;
transition: ease all .3s;
}
If you want to use for all the links, use a tag only in the CSS selector:
a{
}
Hope it helps!
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?
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.
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!
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.
You can modify any code to work to your needs, so if you are unable maybe a developer can help you modify this for other modules.