Как можно уменьшить код, стилизуя элемент <a>вместо создания нового <div>?

Question

Я хочу стилизовать Ionicons, поэтому при наведении курсора на значок социальной сети она приобретает цвет:

        <div class="col span-1-of-2">
            <ul class="social-icons">
                <li><a href="#"><div class="facebook"><ion-icon name="logo-facebook"></ion-icon></div></a></li>
                <li><a href="#"><div class="twitter"><ion-icon name="logo-twitter"></ion-icon></div></a></li>
                <li><a href="#"><div class="google"><ion-icon name="logo-google"></ion-icon></div></a></li>
                <li><a href="#"><div class="instagram"><ion-icon name="logo-instagram"></ion-icon></div></a></li>
            </ul>
        </div>

Существует ли способ стилизации каждого элемента без создания отдельного элемента div для каждой социальной сети?

.facebook:hover,
.facebook:active {
    color: #1877f2;
}

.twitter:hover,
.twitter:active {
    color: #1da1f2;
}

.google:hover,
.google:active {
    color: #ea4335;
}

.instagram:hover,
.instagram:active {
    color: #c32aa3;
}

Answer 1

Использовать встроенные стили в сочетании с CSS переменными:

.social-icons li a:hover,
.social-icons li a:active {
  color: var(--c);
}

/* Irrelevant styles*/
.social-icons {
  font-size:30px;
  display:flex;
  list-style:none;
}
.social-icons a {
 text-decoration:none;
 padding:5px;
}

<div class="col span-1-of-2">
  <ul class="social-icons">
    <li>
      <a href="#" style="--c:#1877f2">
        <ion-icon name="logo-facebook">A</ion-icon>
      </a>
    </li>
    <li>
      <a href="#" style="--c:#1da1f2">
        <ion-icon name="logo-twitter">A</ion-icon>
      </a>
    </li>
    <li>
      <a href="#" style="--c:#ea4335">
        <ion-icon name="logo-google">A</ion-icon>
      </a>
    </li>
    <li>
      <a href="#" style="--c:#c32aa3">
        <ion-icon name="logo-instagram">A</ion-icon>
      </a>
    </li>
  </ul>
</div>