Slide in underline effect on the main navigation

Hey there,

I am currently transferring an Elementor built design from a pretty bloated and clunky themeforest theme, which admittedly is not officially compatible with Elementor at all, over to GeneratePress.
The speed increased by 50% easily just by switching the theme, ha! :)

I am now trying to recreate the slide in underline effect on the main navigation.
You can see how it currently looks on the *old* site here: thetaconnection.de

And here is what I got so far on the *new* site - mine is a bit slower, which I like.

(URL to the dev page in the website URL field so it's not public)
Login: rb
PW: elegantowl

Now I managed successfully to create this sliding underline effect light weight using only CSS, BUT the underline is now way away from the links.
I tried messing around with margins and paddings on the various parts of the .main-navigation .main-nav ul li a class but to no success. Any idea how to move the underline closer to the links?
Here is my current CSS:

.main-navigation .main-nav ul li a
{
text-decoration:none;
display: inline-block;
color:black;
}

.main-navigation .main-nav ul li a:after 
{
content: '';
display: block;
height: 1px;
width: 0;
margin-bottom:20px !important;
background: transparent;
transition: width .5s ease, background-color .5s ease; /* .5 seonds for changes to the width and background-color */
-webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */
-moz-transition: width .5s ease, background-color .5s ease; /* FireFox */
}

.main-navigation .main-nav ul li a:hover:after 
{
width: 100%;
background: black;
}

Also, I would like the underline to stay there when you click on a link, to indicate where the visitor currently is on the side. I have failed to do that as well.

Thanks so much for your help! :)

Daniel