使用radial-gradient构建它，您可以轻松地控制位置/大小：

.switch {
  display: flex;
  appearance: none;
  border: none;
  background-color: white;
  align-items: center;
}

.switch::before {
  --r: 15px; /* radius */
  --g: 5px; /* gap */

  content:"";
  height: calc(2*(var(--r) + var(--g)));
  aspect-ratio: 2;
  border-radius: 200px;
  background: 
    radial-gradient(var(--r) at calc(var(--r) + var(--g)) 50%,
    #fff 90%,blue); /* colors here */
  padding: var(--g);
  box-sizing: border-box;
  margin-right: 10px;
}

<button class="switch" type="submit">
  Can edit users
</button>

由于您使用content: "•";，点的位置将取决于您使用的字体。因此，我提供以下解决方案：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.switch {
  --height: 46px;
  --width: 94px;
  --offset: 6px;
  display: inline-flex;
  align-items: center;
  appearance: none;
  border: 0;
  background: none;
  position: relative;
  cursor: pointer;
}

.switch:before {
  content: '';
  width: var(--width);
  height: var(--height);
  border-radius: calc( 2 * var(--width) );
  flex: none;
  background-color: blue;
}

.switch:after {
  content: '';
  position: absolute;
  top: var(--offset);
  left: var(--offset);
  width: calc( var(--height) - 2 * var(--offset) );
  aspect-ratio: 1;
  /* or */
  /* height: calc( var(--height) - 2 * var(--offset) ); */
  background-color: white;
  border-radius: 50%;
  transition: transform .4s;
  will-change: transform;
}

.switch.active:after {
  transform: translateX( calc( var(--width) - var(--height) ) );
}

<button class="switch" type="button" onclick="this.classList.toggle('active')">
  &nbsp; Can edit users
</button>