Preview:
/* Copy this code, change the "a" to whatever your menu item id/class is 
In beaver builder you can typicall use the menu id which is something like -> #menu-item-27 */
a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
/* Copy this code, change the "a" to whatever your menu item id/class is */
a:hover:after { 
  width: 100%; 
  left: 0; 
  }
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter