将字体大小扩展为a<；a>；使用javascript而不影响另一个的填充<；a>；

我有以下代码来显示3个链接，每个链接旁边都有：-

<div class="col-xl-9 col-lg-9">
    <div class="main-menu  d-none d-lg-block">
        <nav>
            <ul id="navigation">
                <li><a class="movement" href=@customurl style="@Html.IsSelected(actions: "Index", controllers: "Home")">home</a></li>
                <li><a class="movement" style="@Html.IsSelected(actions: "FAQ", controllers: "Home")" href="@(customurl+ "home/faq/")">FAQ</a></li>
                <li><a class="movement" style="@Html.IsSelected(actions: "Contact", controllers: "Home" )" href="@(customurl+ "home/Contact/")">Contact</a></li>
              
            </ul>
        </nav>
    </div>
</div>

但是当文本在悬停>>上展开时，左侧和右侧的链接将被填充到左侧和右侧>>所以我的问题是如何在不移动其他链接的情况下展开悬停链接的文本？ 谢谢

请添加一些CSS样式。 这是完整的代码

$（文档）.ready（函数（）{
//window.location.replace（“https://vytalizehealth.com/");
$（函数（）{
$（“.movement”）。悬停(
函数（）{
$（this.css（“fontSize”，“20px”）；
},
函数（）{
$（this.css（“fontSize”，“16.5px”）；
})
});
});
li{
高度：20px；
对齐内容：居中对齐；
位置：相对位置；
}
李阿{
位置：绝对位置；
底部：0；
}






与其更改字体大小，为什么不应用
转换：缩放（1.2）
例如？@Paulie\u D您能提供更多建议吗？@Paulie\u D您的方法对我有用，谢谢
 $(document).ready(function () {
            //window.location.replace("https://vytalizehealth.com/");
            $(function () {
                
                $(".movement").hover(
                   
                    function () {
                        $(this).css("fontSize", "20px");
                    },
                    function () {
                        $(this).css("fontSize", "16.5px");
                    })
            }); });