Custom css to mega menu element

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?