Html 带有after元素的自定义复选框-未可靠居中

由于某些原因，JSFIDLE无法在堆栈代码段中工作：

我有一个自定义复选框，如下所示：

<label for="name" class="customCheckboxLabel">
        <input type="checkbox"  name="name" class="customCheckboxInput" />
        <span>Foo</span>
</label>

这将导致选中框时出现一个圆，该圆在其包含的正方形内不太居中。我已经能够使用设置为随机值的

行高

将其大致居中，但必须针对每个复选框的高度/宽度以及元素字体大小更改此值。这对我所需要的东西不起作用。我真正想要的是，唯一的大小定义是跨距的字体大小，以及复选框的宽度/高度。after元素应该只填充复选框（使用少量填充）并居中

---

此外，我一直试图在跨度的底部添加一些填充物，但这完全被忽略了。我只希望跨距和复选框垂直对齐。

在本例中，创建集中圆的一个解决方案是使用背景色、定位、相对尺寸、自动边距和边框半径使其不同

&：：之后{
内容：''；
文本对齐：居中；
宽度：50%；
身高：50%；
位置：绝对位置；
保证金：自动；
左：0；
排名：0；
右：0；
底部：0；
背景色：#41b883；
边界半径：50%；
}

您是否尝试过

线条高度：0.47em

或者它不完全是您所需要的？@Azametzin正如我所说，我可以拨入特定的复选框大小（通过实验），但我正在寻找一种方法明确地将其放在中间，这样就不必每次更改复选框大小时都重新校准它。

.customCheckboxLabel {
  span {
    font-size: 3em;
    padding-bottom: 2px; //This is ignored. 
  }
  .customCheckboxInput {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance:none;
    width: 3em;
    height: 3em;
    background-color: transparent;
    border: 2px solid red;
    border-radius: 0.5em;
    transition: all 0.5s;
    &:checked {
      transform: rotate(45deg);
      border-color: black;
      &::after {
        content: "\2022";
        font-size: 6em;
        color: #41b883;
        text-align: center;
        width: 100%;
        height: 100%;
        position: absolute;
        line-height: 0.1em; //This is random
      }
    }
  }
}