Changing scale of pseudo-element slightly moves the parent element - css

Question

I made a project with just the important code: git
You can see it on the navbar buttons here(live website of the git project).
This css also changes the color of the moved text on some browsers (friends chrome, but not on mine). Have no clue how to fix it.
.underline {
position: relative;
text-decoration: none;
transition: all 0.35s ease;
}
.underline::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 30%;
left: 0;
background-color: white;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.underline:hover::before {
visibility: visible;
-webkit-transform: scaleX(0.9);
transform: scaleX(0.9);
}
nav {
height: 100px;
}
.navbar-item {
font-size: 25pt;
}
<nav className="navbar">
<div className="navbar-brand">
<Link href="/">
<a className="navbar-item">
<img src="/trinity-logo.png" />
</a>
</Link>
</div>
<div className="navbar-menu">
<div className="navbar-start">
<Link href="/">
<a className="navbar-item underline">
<b>Hover</b>
</a>
</Link>
<Link href="/">
<a className="navbar-item underline">
<b>Hover</b>
</a>
</Link>
<Link href="/">
<a className="navbar-item underline">
<b>Hover</b>
</a>
</Link>
</div>
</div>
</nav>
those navbar classes are from Bulma(I can't paste all of that css here).