Custom css to mega menu element

[ad_1]

Hello, so when i use the below custom css for an underline animation effect on hover. It kinda messes up with other elements used on my header along with my wordpress top admin bar. The links get aligned messed up, some icons, columns also align wrong and get messed up.

The custom CSS i use:

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s ease;
}

Note: That i use that in custom css of my mega menu element in elementor css custom code.

I know im doing something wrong, like it grabs all links globally (“a”) grabbing the link selector. However i am only adding this code in the particular mega menu element so it should work only for that i suppose or not?

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer