Изменить цвет при событиях active и hover

Как изменить цвет svg при active и hover в ::after?

          <div class="swiper-pagination">
            <span class="swiper-pagination__info"></span>
            <span class="swiper-pagination__info"></span>
            <span class="swiper-pagination__info"></span>
            <span class="swiper-pagination__info"></span>
          </div>

.swiper-pagination { display: flex;

  &-bullet {
    position: relative;
    width: 150px;
    height: 0;
    border-radius: 0px;
    opacity: 1;
    color: #FFFFFF;
    margin-right: 147px!important;
    margin: auto!important;

    &::after {
      content: 'Construction Products';
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 23px;
      background: url(../img/main-page/services/Vector.svg) no-repeat;
      background-position: left;
      padding-left: 60px;
      fill: red;
    }

    &:nth-child(2) {
      &::after {
        content: 'Household Products';
      }
    }
    &:nth-child(3) {
      &::after {
        content: 'Agricultura Product';
      }
    }
    &:nth-child(4) {
      &::after {
        content: 'Electronics Product';
      }
    }

    &-active {
      background: #B1231E; 
      color: #B1231E;
    }
  }
}

<svg  class="icon-vector"  width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">