padding or space from text to underline - css

Question

I am making a website: Website. In the menubar I have an underline when a specifi menu is active, or you hover over the menu options.
I would like that there is some px space from the menu text to the underline. How is that possible?
I tried to set a border-bottom:1px solid white, but that does not do the trick for me.
It is the following CSS the underline is on:
.wpmega-black-white .wpmm-mega-wrapper > li:hover,
.wpmega-black-white .wpmm-mega-wrapper > li.current-menu-item {
text-decoration: underline;
margin-top: 0.8em;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}

Answer 1

Edited
delete previous codes and modify your CSS as I wrote:
in your CSS files /css/style.css?ver=4.9.4 find and change these block of codes. please have a backup before modifinig
please note that you should not delete other parameters of elements, only change what I wrote.
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal ul.wpmm-mega-wrapper > li > a {
padding: 20px 15px 10px 20px;
}
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal ul.wpmm-mega-wrapper > li.current-menu-item a, .wp-megamenu-main-wrapper.wpmm-orientation-vertical ul.wpmm-mega-wrapper > li.current-menu-item a{
border-bottom: 2px solid #FFF;
}
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal.wpmm-askins-wrapper ul.wpmm-mega-wrapper > li.menu-item-has-children > a:after {
top: 60%;
}
add this to your own css file
.wp-mega-menu-link:hover {
border-bottom: 2px solid #FFF;
}

Answer 2

text-decoration does exactly what is says it does, underline the text...you can't move the location of that underline (yet). You would have to use a positioned pseudo-element on the inner span.
For example:
ul {
list-style: none;
background: #000;
}
li {
display: inline-block;
}
li>a {
color: white;
padding: 20px 15px 20px 20px;
position: relative;
display: block;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
overflow: visible;
font-family: "Work Sans", Helvetica, Arial, sans-serif;
text-transform: capitalize;
text-align: left;
text-decoration: none;
}
li>a span {
position: relative;
}
li>a span::after {
content: "";
position: absolute;
bottom: -10px;
/* adjust spacing here */
left: 0;
width: 0%;
height: 1px;
transition: width .3s ease;
background: transparent;
}
li>a.current-item span::after {
background: currentcolor;
width: 100%;
}
li>a:hover span::after {
width: 100%;
background: currentcolor;
}
<ul>
<li><span>MY TEXT HERE</span></li>
<li><span>MY NEW ITEM</span></li>
</ul>
This also means they can be animated.