Псевдокласс :before не работает на конкретной кнопке

Содержание

Вопрос или проблема
Ответ или решение
Почему псевдокласс :before для кнопки не работает?
Анализ проблемы
Решение проблемы
Дополнительные действия
Заключение

Вопрос или проблема

В настоящее время я создаю интернет-магазин, и маленькая кнопка с псевдоклассом :before внезапно перестала работать. Сайт работает на WP с Divi и Woocommerce. Я хочу, чтобы следующий код снова заработал:

.woocommerce-page ul.products li.product .button.add_to_cart_button:before,
.woocommerce ul.products li.product .add_to_cart_button:before {
    color: inherit;
    Font-family:ETmodules;
    content: "\e015" !important; 
}

Единственное, что я сделал перед возникновением ошибки, это добавил эти CSS-правила для улучшения удобства использования сайта:

.et-cart-info{color: #ee4b4b !important; font-weight:bold !important;}

.gfields{font-size:16px; color:#232323; text-transform: uppercase;}

.woocommerce-message[role="alert"]{color: red !important; border-color: red !important;}

Этот маленький :before должен работать, потому что это иконка добавления в корзину. Я пробовал много способов, и ничего не сработало. Нет проблем, если нужны PHP-списки.

Ссылка на страницу: Страница с проблемой

Я хочу вернуть эту иконку: Пример иконки здесь

По какой-то причине на :before вашей кнопки установлено display none. Следующий код должен это исправить.

.woocommerce-page ul.products li.product .button.add_to_cart_button:before,
.woocommerce ul.products li.product .add_to_cart_button:before {
    display: block;
}

Ответ или решение

Почему псевдокласс :before для кнопки не работает?

Согласно вашему описанию проблемы, вы столкнулись с ситуацией, когда псевдокласс :before для кнопки "Добавить в корзину" на вашем сайте, созданном с использованием WordPress, Divi и WooCommerce, перестал функционировать. Ваша цель заключается в том, чтобы вернуть иконку, представляющую эту кнопку, используя CSS, который вы предоставили.

Анализ проблемы

CSS-приоритеты: Вероятно, изменение CSS, которое вы внесли для улучшения пользовательского интерфейса, затеняет ваш изначальный код для псевдокласса :before. Поскольку вы добавили новые правила, возможно, они не сочетаются с вашими старыми стилями.
Скрытие элементов: Если на кнопке присутствуют другие стили, которые устанавливают для псевдоэлемента :before свойство display: none;, это приведет к тому, что иконка не будет отображаться. Поэтому важно убедиться, что ваши стили не заданы с более высоким приоритетом.
Ошибки в CSS: Необходимо проверить, правильно ли указаны имена шрифтов и код иконки, а также наличие этой иконки в используемом шрифте (например, Fontello, Font Awesome и т.п.).

Решение проблемы

Чтобы исправить вашу проблему с псевдоклассом :before, попробуйте внести следующие изменения в ваш CSS:

.woocommerce-page ul.products li.product .button.add_to_cart_button:before,
.woocommerce ul.products li.product .add_to_cart_button:before {
    display: block; /* Убедитесь, что псевдоэлемент отображается */
    color: inherit; /* Наследуемый цвет */
    font-family: ETmodules; /* Поддержка шрифта для иконки */
    content: "\e015" !important; /* Значение кода для иконки */
}

Помимо этого, стоит проверить, что:

Шрифт ETmodules подключен на вашей странице, иначе иконка не будет отображаться.
Если используется Font Awesome (или другой шрифт), убедитесь, что код иконки соответствующий.

Дополнительные действия

Кэширование: Не забудьте очистить кэш вашего сайта и браузера после внесения изменений. Иногда старые стили могут оставаться в кэше, что запретит отображение новых правил.
Инспектор браузера: Используйте инструменты разработчика (инспектор) в вашем браузере, чтобы проверить, какие правила CSS применяются к вашему кнопке. Найдите элементы с классом .add_to_cart_button и проверьте, нет ли конфликтующих свойств.
Тестирование: Если проблема все еще не решена, попробуйте отключить другие стили по отдельности, чтобы идентифицировать, может ли какое-либо конкретное правило переопределять ваши стили для псевдокласса :before.

Заключение

Устранение проблемы с псевдоклассом :before требует внимательного анализа стилей вашего сайта. Проверяйте конфликты между различными правилами, убедитесь, что ресурсные шрифты загружены должным образом и используйте инструменты разработчика для выявления потенциальных причин проблемы. С учетом предложенных шагов, вы сможете восстановить отображение вашей иконки "Добавить в корзину".