Shorten Elementor menu underline on hover / selection

Issue

I am I would like to shorten the "underline" in the Elementor header menu of my Wordpress website: Shortening of header underline - screenshot

I used this code to achieve this (I copied it from somewhere else):

.

elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after
{ 
    width: 70%; 
    right: 0; 
    margin: 0 auto; 
}

Question 1: Is there a neater / better way to achieve what I want?

Question 2: If I completely remove ".elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before", my underline still seams to work. Why do I then need this in my code?

As always, thank you. Michelle

Solution

Ans 1: There is no other way to do this now.

Ans 2: Only this css should work fine if you put it in your Nav menu widget > Advanced > Custom css tab or in wp customizer if you want to apply it to any other nav menu throughout the site

.e--pointer-underline .elementor-item:after {
width: 50%;
margin: 0 auto;
right: 0;
}

The other css that you have is used to avoid affecting the other pointer style of nav menu widget such as the frame option.

Answered By - Soykot