悬停时使标签加粗会使容器移动

jfiddle link

这是我的html代码:

<form>
  <div>
    <b class="group-label">from</b>
    <span class="input-wrapper">
      <input type="radio" id="from-hiragana" name="from" value="true">
      <label for="from-hiragana">
        <span>Hiragana</span>
      </label>
    </span>
    <span class="input-wrapper">
      <input type="radio" id="from-katakana" name="from" value="true">
      <label for="from-katakana">
        <span>Katakana</span>
      </label>
    </span>
    <span class="input-wrapper">
      <input type="radio" id="from-romaji" name="from" value="true">
      <label for="from-romaji">
        <span>Romaji</span>
      </label>
    </span>
  </div>
</form>

这是我的css代码:

.input-wrapper {
  margin-right: 30px;
}

.input-wrapper label {
  position: relative;
  cursor: pointer;
}

.input-wrapper label:hover {
  font-weight: bold;
  transition: 0.3s font-weight;
}

.input-wrapper span::before,
.input-wrapper span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.input-wrapper span::hover {
  cursor: pointer;
}
.input-wrapper span::before {
  left: -20px;
  width: 17px;
  height: 17px;
  background-color: white;
  border-radius: 50px;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label span::after {
  left: -17px;
  width: 11px;
  height: 11px;
  border-radius: 10px;
  background-color: #98fbc9;
  transition: left .25s, background-color .25s;
}

.group-label {
  margin-right: 30px;
  text-transform:uppercase;
}