Не работает псевдокласс hover на иконночном шрифте. Как это исправить?

Question

[Queen2]

Создал иконночный шрифт и вроде все хорошо работает но когда хочу сделать всевдокласс hover то ничего не происходит.
Убрал у иконки цвет, в такой случае все отрабатывает, как исправить проблему без удаления изначального цвета у иконки?

вот так все отрабатывает

.icon-facebook:before {
  content: "\e900";
}
.icon-facebook:hover{
  color: red;
}

а вот так уже нет

.icon-facebook:before {
  content: "\e900";
  color: #ccc;
}
.icon-facebook:hover{
  color: red;
}

Answer 1

[Ankhena]

Потому что вот так:

.icon-facebook:hover::before{
  color: red;
}

Либо:

.icon-facebook {
  color: #ccc;
}
.icon-facebook::before {
  content: "\e900";
}
.icon-facebook:hover{
  color: red;
}

Comments

[Queen2]

-_- делал что-то похожее
.icon-facebook:hover::before
только сначала писал before а потом hover
спасибо вам большое, теперь работает

Answer 2

[Дмитрий]

.icon-facebook:before {
  content: "\e900";
  color: #ccc;
}
.icon-facebook:before:hover{
  color: red;
}

Попробуй вот так написать

Comments

[Ankhena]

.icon-facebook:before:hover

Вас не смущает, что псевдоэлементов нет состояний?

[Дмитрий]

Ankhena, нет.

[Ankhena]

Дмитрий, Тогда хотя бы проверяйте, что советуете. Тем более новичкам.

[Сергей delphinpro]

Дмитрий, и зря