css圆在浏览器缩放时变为椭圆形

我通过css创建了单选按钮。只是在伪元素上设置了如下样式：

这是html

<label class="wrapper">
  <input type="radio" />
  <div class="label">Text</div>
</label>

<label class="wrapper wrapper--checked">
  <input type="radio" />
  <div class="label">Text</div>
</label>

我的问题是：

---

当我使用浏览器和Windows边缘进行缩放时，内圈放错位置或外圈变为椭圆形。有人有解决办法吗

我没有找到解决方案，所以我将它改为内联SVG。内联，因为在其他情况下，SVG在某些浏览器上变得非常像素化

我没有找到解决方案，所以我将其更改为内联SVG。内联，因为否则，SVG在某些浏览器上会变得非常像素化

寻求代码帮助的问题必须包含在问题本身中重现SVG所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参阅。感谢我更改的信息。寻求代码帮助的问题必须包含在问题本身中重现问题所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。谢谢你提供的信息，我改了

input {
  display: none
}

.wrapper {
    font-family: "arial";
    align-items: center;
    color: #00f;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    justify-items: center;
    padding: .5rem 0 .5rem 1.3rem;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;

  &::before,
  &::after {
    border-radius: 50%;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    height: 14px;
    left: 0;
    position: absolute;
    width: 14px;
  }

  &::before {
    border: 2px solid #00f;
  }

  &::after {
    background: #000;
    transform: scale( 0 );
  }

  // checked
  &--checked {
    color: #000;

    &::after {
      transform: scale( .4 );
    }
  }
}