CSS中margin:auto的作用？为何导航hover动画表现不同？

我在HTML中制作了一个带有链接hover效果的导航栏。当我为以下CSS伪元素设置margin:auto时，hover时的下划线效果会从中间向两侧展开：

.nav-links ul li::after {
    content: '';
    background-color: #f44336;
    display: block;
    width: 0%;
    height: 2px;
    margin: auto;
    transition: 0.8s;
}

.nav-links ul li:hover::after {
    width: 100%;
}

但当我将margin设置为固定值（如5px）时，hover效果则从左向右展开。作为前端开发新手，我想请教这一差异的原因，以及margin:auto的作用是什么？

差异原因及margin:auto作用解析 #

1. margin:auto的核心作用

对于块级元素，当元素有明确宽度时，margin:auto会自动分配左右方向的剩余空间作为外边距，让元素在父容器中水平居中。

放到你的场景里：伪元素::after被设为display:block，初始宽度是0%——此时它本身没有宽度，margin:auto会把这个宽度为0的元素定位在父元素<li>的水平中心位置。当hover触发width:100%时，元素会从中心位置同时向左右两侧扩展宽度，最终铺满整个<li>，就形成了「中间向两侧展开」的下划线效果。

2. 固定margin的行为差异

当你把margin设为固定值（比如5px）时，伪元素的左右外边距是固定的，而块级元素默认是左对齐排列。初始宽度0%时，它紧贴<li>的左侧；当hover时宽度增加，只能向右侧延伸（左边的margin固定，无法向左扩展），所以呈现出「从左向右展开」的效果。

内容的提问来源于stack exchange，提问作者Gaurav Abhiman Mahajan