在导航栏中添加底部边框

Question

我在悬停导航栏上添加了底部边框。我希望它显示在与其内联的导航栏底部，而不是直接在文本下方。目前，我已经通过使用height：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>