how do i control the length of the (hover)appearing border?

Question

Hi Im making a website for my portfolio and need some help with a styling problem I've ran into. I'll show you how mine looks and then follow up with the template I'm trying to replicate.

on the bottom one the border appears as if the different texts have a box they're in. If you understand what I mean.

my code is as follows;

Sass:

.header{
nav {
    padding: 2rem 30rem;
    background: $blackish;
}        
&__links {
    a {   
        font-size: $font-med;
        margin-right: 6.25rem; 
        border-bottom: 3px solid transparent;
    }
    a:hover {
        color: $boltyellow;
        padding: 1.9rem 0rem;
        border-bottom-color: $boltyellow;
    } 
}
}

Html:

<header class = "header">
    <div class="top"></div>
    <nav class = "flex">
        <div class="header__links">
            <a href="#">Home</a>
            <a href="#">Order</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </nav>
</header>

Answer 1

You can do with before or after Pseudo-classes

a:after{
  content:'';
  width:0;
  height:3px;
  background: yellow;
  position: absolute;
  bottom:0;
  left:0;
  display: block;
  transition: ease-in-out .5s;
}

a:hover:after{
  width:100%;
}