Исключить псевдо элементы из зависания

Question

Как исключить псевдоэлементы, такие как :before и :after, которые меняются селекторами, например: :hover?

Возможно, есть какой-то «главный псевдоэлемент», о котором я не знаю?

Я пробовал использовать инструкцию CSS3 :not(), но это не сработало.

Использование: .facebook:hover:before {color: black;} отлично работает, но я уверен, что есть лучшее решение.

---

Пример: Я хочу логотип Facebook, чтобы оставаться черным и изменить цвет текста.

body { 
 
    background: #F7F7F7; 
 
    margin: 0px; 
 
} 
 
.share-button { 
 
    background: #FFFFFF; 
 
    border: 1px solid #D8D8D8; 
 
    display: inline-block; 
 
    font-family: 'Open Sans'; 
 
    font-weight: 600; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    margin: 0px; 
 
    padding: 12px 24px 12px 12px; 
 
    transition: color 1s; 
 
} 
 
.facebook:before { 
 
    display: inline-block; 
 
    height: auto; 
 
    font-family: 'FontAwesome'; 
 
    font-size: 12px; 
 
    padding-right: 12px; 
 
    width: auto; 
 
    content: '\f09a'; 
 
} 
 
.share-button:hover { 
 
    color: #374D8D; 
 
}

<button class="share-button facebook"> 
 
    Share on facebook 
 
</button>

Answer 1

Проблема здесь не о том, что псевдо-элемент в настоящее время «соответствует» по :hover селектора сам по себе, но что она наследует color свойство из соответствующего правила CSS на элемент.

Именно поэтому вам необходимо явно установить его на псевдоэлементе :before - вы не можете блокировать наследование с помощью селектора или использовать стиль для родительского или исходного элемента.