所以我在html中有一个导航栏菜单，它对链接有一个悬停效果。当我把margin属性设置为auto时，悬停效果从链接的中心移动到边缘。
.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%;
}但是，当我设置边距值为其他值时，例如5px，悬停效果从左向右移动。这背后的原因是什么？
我只是一个前端开发的初学者，所以我对CSS的知识不多。
2条答案
按热度按时间bihw5rsg1#
CSS中的margin属性是元素所占空间的最外层环（如下图所示）。增加数字将在所有4个边上给予更多的空白空间。
当您将属性设定为
auto时，它会将顶端和底端的边界设定为0，并将内容置中于水平轴。bvn4nwqk2#
块级元素 * 必须 * 正好占用其包含块的100%宽度。当宽度为0%时，包含块的100%空间是“备用”的。
块级元素上的
margin:auto会占用“备用”水平空间。如果在两端都设置了该值，则备用空间将在两端平均共享。第一个
当宽度的过渡从0%移动到100%时，空格空间减小，两边的边距同样变小，从中间扩展条形。
当边距有值时，li元素被称为“过度约束”，多余的空间必须以不同的方式处理。如果布局方向是从左到右（通常情况下），则忽略右边距值，而是使用填充空间所需的任何值。
第一次
因此，左边距保持相同的5%，右边距最初设置为
100% - (5px + 0%)，随着过渡的发生，右边距逐渐减少到-5px（即100% - (5px + 100%)），条从左向右增长。你还可以看到，如果我们将容器的方向设置为rtl，右边距保持不变，左边距减少，因此条形图从右向左增长。
第一个