In this tutorial I will show you how to add animated underline effect to Divi menu items on hover.

This animated effect will make your website navigation more engaging and intuitive for users improving the user experience by providing a visual feedback about which menu item they are hovering over.

It’s a pure CSS solution and it works with all menus that you can currently create with Divi: the default header (the one you set in Theme Customizer), the Menu module and Fullwidth Menu module menus.

Additionally, I’ll also provide custom CSS for implementing the same effect for the Divi MadMenu desktop menu items too.

Table of Contents

1. Demo
2. How the Animated Underline Hover Effect Works
3. Implementation of the Animated Underline Effect
4. Step 1. Create the Menu Item Underline Element
5. Step 2. Animate the Underline on Hover
6. Step 3. Activate the Animated Underline Effect for Menus
7. Customize the Effect to Create Different Styles
8. Wrapping Up

Demo

Hover over the desktop menu items to see the animated underline effect in action.

Left Aligned style

Centered style

Inline Centered Logo style

Divi MadMenu menu

You can also see this same effect in the Shoppy headers, check out the live demos on desktop.

How the Animated Underline Hover Effect Works

As mentioned, we’ll be using only CSS to create this effect.

The idea is to use a :before pseudo-element on each menu link. We’ll style this pseudo-element to look like a thin line that’s initially hidden.

When a user hovers over the menu item, the line will appear, grow, and move smoothly into place, creating a sleek animated underline effect.

This effect relies on transitioning values like the line’s top offset and width between the normal and hovered states, making the menu feel more dynamic as users move their cursor around.

Implementation of the Animated Underline Effect

Let’s implement this effect in three easy steps:

1. Create the underline element: Use a :before pseudo-element to create the line.
2. Animate the underline on hover: Adjust the line’s position and width when the menu item is hovered over.
3. Activate the effect for your menus: Add the custom CSS class to the menu module to apply the animated underline effect.

Step 1. Create the Menu Item Underline Element

We’ll use the :before pseudo-element of the menu item link (the <a> tag) to create the underline. We need to set it’s width, height, visibility and transition properties.

Initially, we’ll keep the line short and positioned slightly above the link’s bottom edge.

That way, when the user hovers over the link, we can smoothly transition the line’s width and move it downwards.

We also want the line to grow from the center, rather than from one side.

The following CSS does all of the above:

/* Create the menu items underline element */
.dvcs_menu_item_animated_underline .dvmm_menu__menu > nav > ul > li > a:before,
.dvcs_menu_item_animated_underline .et_pb_menu__menu > nav > ul > li:not(.et_pb_menu__logo-slot) > a:before,
#top-menu > li:not(.centered-inline-logo-wrap) > a:before {
    content: " ";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40%;
    width: 10%;
    height: 2px;
    opacity: 0;
    background-color: #0758e6;
    transition: all .2s ease;
}

Step 2. Animate the Underline on Hover

When the user hovers over the menu link, the line should become visible, extend in width, and move down to the bottom edge of the link.

The following CSS does that:

/* Animate the underline element on hovering over the menu items */
.dvcs_menu_item_animated_underline .dvmm_menu__menu > nav > ul > li > a:hover:before,
.dvcs_menu_item_animated_underline .et_pb_menu__menu > nav > ul > li:not(.et_pb_menu__logo-slot) > a:hover:before,
#top-menu > li:not(.centered-inline-logo-wrap) > a:hover:before {
    width: 110%;
    opacity: 1;
    bottom: 0;
}

Copy both CSS snippets above and add them to your header template using a Code module.

Or add the CSS into the Custom CSS field in Divi -> Theme Options -> General -> General if you are using the default header of Divi theme, or if you want the CSS to apply to all menus on your Divi site globally.

Step 3. Activate the Animated Underline Effect for Menus

You may have noticed that we used the dvcs_menu_item_animated_underline CSS class in the selectors of our custom CSS.

That’s the CSS class we will use ot activate the animated underline effect for Divi menu items.

After you’ve added the CSS, assign this CSS class to the Divi Menu or Divi MadMenu module. You can do that in the module’s Advanced -> CSS ID & Classes -> CSS Class field.

Customize the Effect to Create Different Styles

You can achieve different effect styles with just a few minor tweaks applied to the CSS provided above. Check out the examples below.

Animate the menu item underline from left to right

Instead of the underline growing from the center, you can make it animate from the left side.

Use the following CSS to do that.

/*
 * Add animated underline to Divi menu items expanding from left to right.
 */
.dvcs_menu_item_animated_underline_left .dvmm_menu__menu > nav > ul > li > a:before,
.dvcs_menu_item_animated_underline_left .et_pb_menu__menu > nav > ul > li:not(.et_pb_menu__logo-slot) > a:before,
#top-menu > li:not(.centered-inline-logo-wrap) > a:before {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    opacity: 1;
    background-color: #0758e6;
    transition: all .2s ease;
}

.dvcs_menu_item_animated_underline_left .dvmm_menu__menu > nav > ul > li > a:hover:before,
.dvcs_menu_item_animated_underline_left .et_pb_menu__menu > nav > ul > li:not(.et_pb_menu__logo-slot) > a:hover:before,
#top-menu > li:not(.centered-inline-logo-wrap) > a:hover:before {
    width: 100%;
}

Animate the menu item background

If you get a bit more creative you can even make the menu item background animate using the same CSS snippet as a starting point.

The following CSS will add the animated background effect to the Menu module menu items on hover.

/*
 * Add animated background to Divi Menu module desktop menu items.
 */
.dvcs_menu_item_animated_bg .et_pb_menu__menu > nav > ul > li:not(.et_pb_menu__logo-slot) > a {
    z-index: 0;
}

.dvcs_menu_item_animated_bg .et_pb_menu__menu > nav > ul > li:not(.et_pb_menu__logo-slot) > a:before {
    content: " ";
    position: absolute;
    left: -8%;
    top: 28px;
    width: 0;
    height: 20px;
    opacity: 1;
    background-color: #ffcc00;
    transition: all .3s ease;
    z-index: -1;
}

.dvcs_menu_item_animated_bg .et_pb_menu__menu > nav > ul > li:not(.et_pb_menu__logo-slot) > a:hover:before {
    width: 116%;
}

Wrapping Up

That’s it! We’ve learned how to add a smooth, animated underline hover effect to your Divi menu items using pure CSS.

We’ve also seen how easy it is to customize it in different ways. Try experimenting with different styles, and even combining them to create a unique navigation experience for your visitors. You can also try to apply this effect to active menu links to highlight them as users scroll through sections on a one-page layout. If that’s something you’d like to explore, check out this tutorial on how to highlight active menu items on scroll in Divi.

If you have any questions or want to show off what you’ve created, feel free to drop a comment below!