Получить и изменить: перед элементом с помощью jQuery

Question

Я хочу выбрать элемент, который был создан селектором CSS :before,

Я попробовал это с помощью $('#element:before'), но это не сработало, потому что он выбрал весь элемент, а не только :before элемент.

Вот пример кода: ДЕМО

В этом примере только строка "1. " должна быть красной, а не вся строка. есть идеи как это сделать?

Answer 1

JQuery не может устанавливать свойства css для:before содержимого, так как оно не содержится в элементе. Если вы хотите иметь возможность управлять цветом содержимого:before с помощью javascript, вы можете создать дополнительный класс css и добавить / удалить этот класс.

пример

Answer 2

Вы не можете настроить таргетинг на контент, созданный с помощью CSS :before, Однако вы можете настроить таргетинг на элемент данных и добавить его к тегу содержимого в css. Смотрите для этого принятый ответ на этот вопрос.

Также возможно оформление с помощью CSS, если вы хотите, чтобы это было вашей целью:

div:before {
    content: '1. ';
    color:red;
}

Сделаю только 1. красный.

Answer 3

Способ может быть custom properties, практически css переменные.

Вот совместимость

Вот немного документации

И пример, где переменная --myColorимеют глобальную область действия, поскольку объявлены в разделе :root: