Html 自定义复选框正在更改大小

我正在创建一些自定义复选框。我正在隐藏标准复选框并将其替换为以下内容：

.newcheckbox:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background-color: rgba(29, 190, 96, 0.1);
  border: 1px solid #1DBE60;
}

input[type="checkbox"]:checked + .newcheckbox:before {
  color: #FFF;
  background-color: #1DBE60;
  content: "\2022";
  font-size: 20px;
  text-align: center;
}

问题是，当我添加“内容”时，当复选框处于选中状态时，其高度会发生变化，并且下方的元素会跳跃。我一直在绞尽脑汁想这是什么原因造成的

下面是一个演示问题的例子：

---

您可以看到，当您删除“内容”时，它不会跳转。

将

溢出：隐藏添加到所有
输入[type=“checkbox”]：选中

这里的片段


/*样式在这里*/
输入[type=“checkbox”]{
显示：无；
}
.绿色科技：之前{
内容：“；
显示：内联块；
宽度：30px；
高度：30px；
边界半径：2px；
背景色：rgba（29190,96,0.1）；
边框：1px实心#1DBE60；
溢出：隐藏；
}
输入[type=“checkbox”]：选中+。技术绿色：之前{
颜色：#FFF；
背景色：#1DBE60；
内容：“\2022”；
字体大小：20px；
文本对齐：居中；
显示：内联块；
溢出：隐藏；
}
.技术警告：之前{
内容：“；
显示：内联块；
宽度：30px；
高度：30px；
边界半径：2px；
背景色：rgba（240,147,29,0.1）；
边框：1px实心#F0931D；
}
输入[type=“checkbox”]：选中+。技术警告：之前{
颜色：#FFF；
背景色：#F0931D；
内容：“\2022”；
字体大小：20px；
文本对齐：居中；
显示：内联块；
溢出：隐藏；
}
你是个救生员。非常感谢。：）