CSS sorun yardım

<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

hocam işte onu ayarlamaya çalıştım ama ne yazarsam yazayım değişmiyor. denemek için yazdım onu

height:100px!important; deneyin yada max-height:100px!important;

hover ve activenin de uzunluğnu küçültmek yani anasayfa ve yazılar kısmının altındaki çubuğun uzunluğunu yazılar ile aynı ypamak istiyorum

Tamam öyleyse, border özelliğini direkt <li etiketine değil, <li içerisinde <a itemine verirseniz, border yazı ile eşit uzunlukta olur. STİL: ( menu-li-a:hover.menu-li a:hover ) CLASS: (class="menu-li-a" class="menu-li")

Örneğin: AnasayfaBasındaki Çalışmalarımız
Şeklinde yazıya göre bottom çıkacaktır, size önceki yorumda gönderdiğim <a'ya göre border uzunluğu vermiştim.

Benmi anlamıyorum sizin anlatmaya çalıştığınızı.