<div class="menu">
    <div class="menulogo">
        <div class="logo"></div>
        <div id="menuyazi">
            <ul >
                <li class="menu-li-active"><a href="#">ANASAYFA</a></li>
                <li class="menu-li"><a href="#" >YAZILAR</a></li>
                <li><a href="#" >KATEGORİLER</a></li>
            </ul>
        </div>
    </div>
</div>

.menu-li a:hover{
    border-bottom: 3px solid #EC6A6A;
    margin-top:0px;
    transition: .1s;
    height: 2222px;
     
}
.menu-li-active a{
     
    border-bottom: 3px solid #EC6A6A;
    margin-top:0px;
    transition: .2s;
    width: center;
}

Bu şekilde eklermisin, bu daha doğru bir kullanım olacaktır.

Birde border'i mi küçülteceksin?
Bana ne istediğini, nereye istediğini, hangi nesneye etki etmek istediğini söyle ki yardımcı olayım.
Çizgiyi küçültmek istiyorum diyorsun ama 2 adet çizgi var bir active birde hover olanlarda.
Pixel değernimi düşürmek istiyorsun?

Yani bir çok soru var şuan kafamda