Html 当父位置发生变化时，伪元素会移动

我有一个动画按钮，下面有一个文本，它是由一个

：after

选择器制作的。当按钮处于活动状态（单击）时，该按钮向下移动2px，并且

box shadow

被移除，从而产生单击效果。但这也改变了使用

：在

选择器之后创建的元素的位置。如何使文本始终保持静止

。开始{
宽度：20px；
高度：20px；
边界半径：50%；
边框：4px实心#4444；
左边距：20px；
边缘顶部：8px；
背景色：#FC0102；
盒影：0px 2px 5px黑色；
位置：相对位置；
}
.开始：活动{
盒影：0px 0px 5px黑色；
顶部：2个；
}
.开始：之后{
内容：“开始”；
位置：绝对位置；
顶部：25px；
字体大小：13px；
左：-4px；
}

---

在

:active

:

.start:active:after {
  margin-top: -2px;
}

片段：

。开始{
宽度：20px；
高度：20px；
边界半径：50%；
边框：4px实心#4444；
左边距：20px；
边缘顶部：8px；
背景色：#FC0102；
盒影：0px 2px 5px黑色；
位置：相对位置；
}
.开始：活动{
盒影：0px 0px 5px黑色；
顶部：2个；
}
.开始：之后{
内容：“开始”；
位置：绝对位置；
顶部：25px；
字体大小：13px；
左：-4px；
}
.开始：活动：之后{
页边顶部：-2px；
}