Animated underline CSS (Semplice 3)

FOR VERSION 3.0.9 OR EARLIER ONLY

Note: We do not offer full support for this kind of customization, so use this code at your own risk.

Below you will find the code for an animated underline effect. The code targets the menu items, you can adapt the selector to use this animation for every kind of element.

nav a::after {
  border-bottom: 3px solid #696969;
  content: '';
  display: block;
  position: relative;
  top: -3px; /* Change the vertical position of the underline */
  transition: width 0.3s;
  width: 0%;
}

nav a:hover::after,
nav .current-menu-item a::after {
  width: 100%;
}

This will work for the standard menu and the menu links within the dropdown menu.

Please make sure to change the ‘top’ value on mobile using media queries, as the underline position is different on mobile.
 

@media (max-width: 979px){
    nav a::after {
          top: 0px; /* Change the vertical position of the underline */
    }
}