Divi Menu Navigation Bar & Dropdown menu style

Custom CSS Step-by-step

CSS :before pseudo-element with Divi Menu links

CSS pseudo-elements work as if you had added a whole new HTML element into the markup, rather than applying styling to existing elements. We can use it to add any element next to our Menu links. Next, we can edit the appearance of the pseudo-element with any CSS properties!

Here’s the CSS selector I used to add the :before pseudo-element to all links inside the menu module with CSS class of dl-menu:

/* This targets all links within a container */

.dl-menu a:before {
    content:'Sample Text';
}

The problem with this selector is that it is too generic – it would target the Logo link, too. Here’s a more specific selector that specifies two parent containers: dl-menu CSS class added to the Menu module and an unordered list with a CSS class of et-menu:

/* This targets all links within a menu list inside the container */

.dl-menu ul.et-menu a:before {
    content:'Sample Text';
}

And to limit it further, we can make sure to only target first-level links and not sub-menu items:

/* This targets first-level links within a menu list inside the container */

.dl-menu ul.et-menu > li > a:before {
    content:'Sample Text';
}

Now, instead of “Sample text” we can specify the position and the appearance of the pseudo-element. The CSS code below shows the 5px underline below the Menu text:

.dl-menu ul.et-menu > li > a:before {
    content: '';
    width: 110%;
    left: -5%;
    height: 5px;
    border-radius: 3px;
    background: lightsalmon;
    position: absolute;
    z-index: -1;
    bottom: 20px;
}

Next, we need to decide on the apprearance of the pseudo-element and separate the styling for the initial state and for the hover state:

/* The Initial State */
.dl-menu ul.et-menu > li > a:before {
    content: '';
    width: 0;
    left: 50%;
    height: 5px;
    border-radius: 3px;
    background: lightsalmon;
    position: absolute;
    z-index: -1;
    bottom: 20px;
    opacity: 0;
}

/* The Hover State */
.dl-menu ul.et-menu > li > a:hover:before {
    width: 110%;
    left: -5%;
    opacity: 1;
}

To make sure the transition beetween the initial and the hover state is not abrupt, we have to add a transition property. We can use the Cubic Bezier generator to generate custom timing function: transition: .3s cubic-bezier(.25,.01,.32,1.61);

And to display the underline on the current active page, we can use WordPress-generated custom CSS classes. If one of the menu links targets the currently viewed URL – it gets additional CSS class of current-menu-item. We can use that class to add a second target that needs to look the same as the hover state. The final CSS code used in the example looks like this:

.dl-menu ul.et-menu > li > a:before {
    content: '';
    width: 0;
    left: 50%;
    height: 5px;
    border-radius: 3px;
    background: lightsalmon;
    position: absolute;
    z-index: -1;
    bottom: 20px;
    opacity: 0;
    transition: .3s cubic-bezier(.25,.01,.32,1.61);
}

.dl-menu ul.et-menu > li > a:hover:before,
.dl-menu ul.et-menu > li.current-menu-item > a:before  {
    width: 110%;
    left: -5%;
    opacity: 1;
}

.dl-menu ul.et-menu > li > a {
    z-index: 1;
}

That’s it!

Enjoy your new fun hover effect!

Feel free to copy the code snippets – or write your own and play with the possibilities! There is a lot you can do to add your own spin to this simple hover effect. I invite you to share your results in the Divi Lovers Facebook group, because I’m really curious what you came up with!

If you enjoyed this tutorial and would like to see more content like this, tell me in the comments below. Thank you for watching and reading!