I am I would like to shorten the "underline" in the Elementor header menu of my Wordpress website: [Shortening of header underline - screenshot](https://i.stack.imgur.com/bV4Hq.png)

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

```html
.

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