Почему эта ссылка стала фиолетовой и потеряла свои стилистические свойства?

Question

Я пытаюсь стилизовать эту кнопку так, чтобы текст был белым, с белой рамкой, как и у других кнопок социальных сетей.Код, который я использовал для всех этих кнопок, идентичен, и кнопка имеет нужные свойства при предварительном просмотре HTML-кода, но по какой-то причине, когда я загружаю файл и посещаю сайт ( josholadunni.com ), кнопка дляLinkedIn фиолетовый и не имеет границы.Любая помощь будет высоко ценится!

.fa {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: transparent;
  color: white;
  border-color: white;
  border-style: solid;
}

.fa-linkedin {
  background: transparent;
  color: white;
  border-color: white;
  border-style: solid;
}

.fa-instagram {
  background: transparent;
  color: white;
  border-color: white;
  border-style: solid;
}

<div id="socialmedia">

  <a href="https://www.facebook.com/oladunnidesign/" class="fa fa-facebook" target="_blank"></a>
  <a href="https://www.linkedin.com/in/josh-oladunni-96a893b8/" class="fa fa-linkedin" target="_blank"></a>
  <a href="https://www.instagram.com/JoshOladunniDesign/" class=" fa fa-instagram" target="_blank"></a>
</div>

Answer 1

Ссылки имеют псевдоэлемент :visited, который применяет некоторые стили по умолчанию после того, как вы посетили URL, на который они указывают.Вы должны применять свои стили не только к .fa, но и к .fa:visited, чтобы получить желаемый результат.