Hi there,
try this as an alternative:
.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item > a:before {
content: "";
position: absolute;
display: block;
bottom: 1em; /* Smaller or -neg number to move line down */
width: 0%;
height: 2px;
background-color: currentColor;
-webkit-transition: 0.3s width ease;
transition: 0.3s width ease;
}
.main-navigation .menu>.menu-item > a:hover:before,
.main-navigation .menu>.current-menu-item > a:before {
width: calc(100% - 40px); /* 40px offsets the menu item width */
}