Divi Theme Create An Animated Undeline Hover Effect On Any Link

How to add a cool animated underline effect to your links with the Divi Theme. In this video we will be showing how to write the CSS hover code (below), and apply it using a CSS Class Name. Today we will be demonstrating how to create this feature using the Divi Code Module and the Additional CSS Panel.

So follow along with this video to see how to do this with your site.

In this video we will cover:

Adding A Divi Code Module.
Adding A CSS Calss Name.
Writing The CSS Underline Code.
Creating A Hover Effect.
Using The Additional CSS Panel
Adding To Other Modules.

Join us in this series of videos where we explore the fantastic effects you can achieve with the Divi theme. With its versatile modules and effects, you can create eye-catching visuals that enhance the look and user experience of your website.

CSS hover effects are powerful tools in web design that enhance user interactivity and engagement. By applying hover effects to elements, such as buttons, links, and images, designers can create dynamic and visually
appealing experiences. Hover effects can include color changes, animations, transitions, and transformations, which respond to user interactions. These effects provide feedback, indicating clickable areas or highlighting interactive elements. They can also be used to reveal additional information or create engaging visual effects. By leveraging CSS hover effects, designers can add depth and interactivity to web pages, improving user experience and making the design more engaging and memorable.

THEMES AND PLUGINS USED IN THESE VIDEOS:

MY YOUTUBE PLAYLISTS:

v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Don't forget to drop any questions below, I will do my best to answer or make a video demo for you!

MY BLOG

CSS CODE USED TODAY

/* Link Underline */

.myhlink a {
position:relative;
text-decoration:none;
color: blue;
}

.myhlink a::after {
content: '';
position:absolute;
bottom: -4px;
left: 0;
width:0;
height: 2px;
background-color: blue;
transition: width .75s ease;
}

.myhlink a:hover::after {
width:100%;
}

CHAPTERS

00:00 Introduction
01:26 Creating A Link.
02:50 Adding A CSS Calss Name.
03:10 Adding A Divi Code Module.
03:37 Writing The CSS Underline Code.
07:27 Creating A Hover Effect.
09:59 Using The Additional CSS Panel.
11:27 Adding To Other Modules.

RECOMMENDED PLAYLISTS

Disclaimer: Some of these links are affiliate links where I'll earn a small commission if you make a purchase at no additional cost to you.

#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite #Divi #elementor

[System]

Don't forget to drop any questions below, I will do my best to answer or make a video demo for you!

[hrtalk_de]

Hey Jamie,
thanks for your video. Can you help me, how to do this effect in the blog module for the title?
Thank you so much.

[lucanitro]

Hello Jamie, I wanted to ask you if you can make a video like this but dedicated to the header menu because strangely the line .. instead of having it under the menu item .. for example the Home .. I find it in the center of the word Home and not I understand why.. Thank you so much for all your Videos!