CSS Цвет текста не работает во всех браузерах

Question

У меня есть выпадающая кнопка для аккордеона, и я хочу, чтобы знак «+» отображался красным цветом. Он правильно отображается на моем настольном компьютере P C в браузере Chrome, но когда я открываю веб-сайт на моей ма c с помощью Chrome или firefox, красный цвет не проявляется.

.accordion {
  background-color: transparent;
  top: 0;
  line-height:1.2em;
  font-family: 'proxima-nova', sans-serif;
    font-weight: 300;
  color:hsl(0, 0%, 34%);
  cursor: pointer;
  padding: 0px;
  border: none;
  outline: none;
  transition: 0.4s;
}


.accordion:after {
  content: '\0020 \02795';
  float: right;
  margin-left: 0px;
  color:#FF0000 !important;

}

.active:after {
  content: "\2796 \0020";
  /* Unicode character for "minus" sign (-) */

}

Когда я проверяю кнопку, она имеет правильный код, но все еще не показывает красный цвет.

Любая помощь приветствуется!

Answer 1

Вы можете использовать этот странный хак:

 color: transparent;
 text-shadow: 0 0 0 red;

Или просто использовать символ UTF-8 '+'

Answer 2

как насчет того, чтобы пытаться поместить :: after контент в «+». Если ничего не работает, и вы используете JS для обработки процесса класса .active, просто добавьте span, содержащий символ плюс, и измените его содержимое на минус, когда оно активно.