html - 带有后元素的自定义复选框 - 不能可靠地居中

Question

JSFiddle，由于某些原因不能在 Stack Snippet 中工作: https://jsfiddle.net/m3aoswyx/2/

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

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

使用以下 SCSS:

.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
      }
    }
  }
}

这会导致在选中该框时出现一个圆圈，该圆圈在其包含的正方形内并不完全居中。我已经能够使用将 line-height 设置为随机值来使它大致居中，但是必须针对每个复选框的高度/宽度和元素字体大小更改此值。这真的不能满足我的需要。我真正想要的是，唯一的大小定义是跨度的字体大小和复选框的宽度/高度。后元素应该简单地填充复选框(带有少量填充)并居中

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

Answer 1

在这种情况下，创建中心圆的一种解决方案是使用背景颜色、定位、相对尺寸、自动边距和边框半径使其不同。

&::after {
  content: '';
  text-align: center;
  width: 50%;
  height: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #41b883;
  border-radius: 50%;
}