变换（比例）和z-index

Question

我使用span创建了3个圆圈，并对其应用了before和after伪元素，以创建看起来像时间轴的东西。当我将鼠标悬停在每个li上时，我希望圆圈缩放/变换。

问题是，当我将鼠标悬停在li和span变换上时，由before / after创建的线在圆的顶部。我也不希望创建的线条发生变形。我该如何解决？

HTML：

<ul
  class="menu">
  <p class="menu-label">Type</p>
  <li
    :class="{ active: selectedOption == 'A' }">
    <a
      @click="onOptionClick('A')">
      <div class="menu-text-container">
      <p>All Users</p>
      </div>
      <span class="toggle-theme-1"></span>
    </a>
  </li>
  <li
    :class="{ active: selectedOption == 'B' }">
    <a
      @click="onOptionClick('B')">
      <div class="menu-text-container">
      <p>All Users</p>
      </div>
      <span class="toggle-theme-2"></span>
    </a>
  </li>
  <li
    :class="{ active: selectedOption == 'C' }">
    <a
      @click="onOptionClick('C')">
      <div class="menu-text-container">
      <p>All Users</p>
      </div>
      <span class="toggle-theme-3"></span>
    </a>
  </li>
</ul>

CSS（Sass）：

.menu
  top: 35px
  right: 8px
  min-width: 320px
  p
    color: $base-color-inactive
  .toggle-theme-1
    background-color: $base-color-inactive
    border-radius: 100%
    padding: 10px
    position: relative
  .toggle-theme-2
    background-color: $base-color-inactive
    border-radius: 100%
    padding: 10px
    position: relative
  .toggle-theme-3
    background-color: $base-color-inactive
    border-radius: 100%
    padding: 10px
    position: relative
  li:first-of-type span:before
    display: none
  li:last-of-type span:after
    display: none
  span::before
    content: ""
    position: absolute
    height: 40px
    width: 2px
    left: 0
    right: 0
    bottom: 15px
    margin-left: auto
    margin-right: auto
    z-index: -1
    background-color: red
  span::after
    content: ""
    position: absolute
    height: 40px
    width: 2px
    left: 0
    right: 0
    margin-left: auto
    margin-right: auto
    z-index: -1
    background-color: red
  li
    position: relative
    a
      @extend .display-flex
      align-items: center
      justify-content: space-between
      padding-left: 40px
      .menu-text-container
        padding-right: 20px
    &:hover, &.active
      a
        background-color: transparent
      p
        color: black
      .toggle-theme-1
        transition: all .2s ease-in-out
        transform: scale(1.2)
        background-color: green
      .toggle-theme-2
        transition: all .2s ease-in-out
        background-color: orange
        transform: scale(1.2)
      .toggle-theme-3
        transition: all .2s ease-in-out
        background-color: black
        transform: scale(1.2)