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

Question

我有一个动画按钮，下面有一个文本，它是用:after选择器制作的。该按钮在激活（单击）时向下移动2px，box-shadow被移除，从而产生单击效果。但这也改变了使用:after选择器创建的元素的位置。如何让文字始终保持静止？

.start {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #444444;
  margin-left: 20px;
  margin-top: 8px;
  background-color: #FC0102;
  box-shadow: 0px 2px 5px black;
  position: relative;
}

.start:active {
  box-shadow: 0px 0px 5px black;
  top: 2px;
}

.start:after {
  content: "Start";
  position: absolute;
  top: 25px;
  font-size: 13px;
  left: -4px;
}

<div class="start"></div>

Answer 1

为 self.navigationController?.navigationBar.backItem?.title = "Back" 上的伪文本添加相同数量的偏移量：

:active

<强>段：

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

.start {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #444444;
  margin-left: 20px;
  margin-top: 8px;
  background-color: #FC0102;
  box-shadow: 0px 2px 5px black;
  position: relative;
}

.start:active {
  box-shadow: 0px 0px 5px black;
  top: 2px;
}

.start:after {
  content: "Start";
  position: absolute;
  top: 25px;
  font-size: 13px;
  left: -4px;
}

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