Добавление нижней границы в Nav Bar

Question

Я добавил нижнюю границу в панели навигации при наведении курсора. Я хочу, чтобы он отображался внизу навигационной панели, а не непосредственно под текстом. В настоящий момент я сделал временный путь, используя высоту: 1.2vw, однако я ищу более точный подход к этому, чем угадывание подгонки. То, как я это сделал в данный момент, не является надежным.

Это мой код:

.main-nav {
    display: flex;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 0.9;
    height: 5vw;
    width: 100%;
}

.main-nav ul {
    list-style-type: none;
    margin: 0 0 0 20vw;
    padding: 0;
    overflow: visible;
    top: 0;
    width: 100%;
    height: 5vw;
}

.main-nav ul li {
    display: inline-block;
    text-align: center;
    margin-left: 2vw;
    height: 5vw;
}

.main-nav li {
    float: left;
    height: 5vw;
}

.logoimg {
    height: 5vw;
    width: auto;
    float: left;
    position: fixed;
    margin-left: 1vw;
    z-index: 1;
}

.main-nav li a, .dropdown {
    display: block;
    padding: 1.2em 2.2em;
    text-decoration: none;
    color: whitesmoke;
    text-align: center;
    font-family: 'tenderness';
    font-size: 1.5vw;
    height: 5vw;
    border-bottom: 0.3vw solid transparent;
}

.main-nav li a:after {
    display: block;
    content: '';
    border-bottom: 0.3vw solid whitesmoke;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    min-width: 6vw;
    height: 1.15vw;
}

.main-nav li a:hover:after {
    height: 1.15vw;
    transform: scaleX(1); 
}


li.products {
    display: inline-block;
    position: relative;
    height: 5vw;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.35);
    min-width: 8vw;
    z-index: 1;
    left: 0;
    right: 0;
}

.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
    text-align: center;
    height: 5vw;
}

.products:hover .dropdown-content {
    display: block;
}

<div class="logo">
    <a href="home.html.jpg"><img src="logo.png" class="logoimg"></a>
</div>
            
<nav class="main-nav">
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="info.html">Information</a></li>
        <li class="products">
            <a href="products.html" class="dropdown">Products</a>
                <div class="dropdown-content">
                <a href="headbands.html">Headbands</a>
                <a href="earrings.html">Earrings</a>
                <a href="Other.html">Other</a>
            </div></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</nav>

<div class="header">
    <h1>Elle and Belle Design</h1>
    <h2>Bespoke Handmade Headbands and Accessories</h2>
</div>