Html 为什么填充会导致跳跃式动画？

当我将顶部和底部填充应用于其父元素时，为什么在高度转换期间，

：：before

伪元素会跳转

a{
字号：2em；
字体系列：无衬线；
文本转换：大写；
颜色：#fff；
文字装饰：无；
位置：相对位置；
/*移除此填充可以解决动画问题，但为什么*/
填充：1em；
}
a:以前{
内容：“；
宽度：0.06em；
身高：0%；
位置：绝对位置；
背景：#fff；
左：0；
过渡段：高度0.25s线性；
}
a:悬停：：之前{
身高：100%；
底部：0；
}
.集装箱{
背景#3a3a；
身高：100%；
显示器：flex；
垫面：1米；
证明内容：中心；
调整项目：灵活启动；
}
身体，
html{
身高：100%；
保证金：0；
}

---

问题在于您的内容没有正确对齐。 这是解决方案

a{
字号：2em；
字体系列：无衬线；
文本转换：大写；
颜色：#fff；
文字装饰：无；
位置：相对位置；
/*移除此填充可以解决动画问题，但为什么*/
填充：1em；
}
a:以前{
内容：“；
宽度：0.06em；
身高：0%；
位置：绝对位置；
背景：#fff；
底部：0；
左：0；
过渡段：高度0.25s线性；
}
a:悬停：：之前{
排名：0；
身高：100%；
}
.集装箱{
背景#3a3a；
身高：100%；
显示器：flex；
垫面：1米；
证明内容：中心；
调整项目：灵活启动；
}
身体，
html{
身高：100%；
保证金：0；
}

---

如果元素上有填充，则在其子元素之一上应用绝对位置。填充量将作为偏移量添加到该子元素

假设你有

paddingtop:10px，它将成为
top:10px
，我想有些浏览器会这样做

演示

*，
*：之前，
*：之后{
保证金：0；
填充：0；
框大小：边框框；
}
.测试{
宽度：100px；
高度：100px；
填充顶部：15px；
边框：5px纯红；
}
.test>div{
高度：50px；
宽度：50px；
边框：5px纯红；
}
.测试：悬停>div{
位置：绝对位置；
/*取消对此行的注释以查看它*/
/*排名：0*/
}
将
底部：0
规则从
a:hover:：before
移动到
a:：before
规则集

一般来说，尽量减少选择器中的规则数量，如
：hover
——每当应用“hover”规则集时，由于无法计算布局引擎将如何呈现内容而导致内容跳跃或移动的可能性会越高，覆盖的属性越多。这里不需要
bottom:0
，但是如果需要与bottom对齐，请在没有
：hover
的同一规则集上设置它，即
a:：before
——它将被处于“hover”状态的元素继承。另一方面，如果您只希望在鼠标悬停时元素的高度发生变化，那么这是应该设置的唯一规则，不是吗？
Hi Jeet！这确实使动画不会跳跃，但我希望它向上生长，然后向上收缩，如我的示例所示：：-）这是我首先创作的动画。但我尝试做反向动画：向上生长和收缩，而不是向下生长和收缩。此外，我还试图了解为什么它会发生，而不是修复它；在内容之前，绝对位置不允许对齐。在启用悬停位置的情况下检查开发人员工具以查看其对齐位置。我喜欢最小化
：hover
规则之类的建议。但是，在本例中，我有意更改锚点以获得所需的动画。我是否理解您希望白线从下一块的垂直中心展开？