Как изменить CSS псевдоэлементы ::before и ::after через JavaScript или jQuery

Оффтоп javascript
1

Как можно управлять CSS псевдоэлементами, такими как ::before и ::after, используя JavaScript или jQuery?

В моем CSS существует правило:

.myDiv::before {
    content: 'привет';
    color: blue;
}

Как я могу заменить текст ‘привет’ на ‘пока’ с помощью чистого JavaScript или jQuery? Я пробовал различные методы, но безуспешно.

Есть ли возможность это сделать? Если да, то какой из способов самый простейший? Например, стоит ли использовать изменение CSS переменных или создание новых классов?

2

JS не может напрямую менять псевдоэлементы. Лучший способ - CSS переменные:

.myDiv::before {
    content: var(--pseudo-content, 'привет');
    color: blue;
}

Потом в JS меняешь:

document.querySelector('.myDiv').style.setProperty('--pseudo-content', "'пока'");

Постоянно так делаю - работает идеально и код чистый.

3

Можно через новые CSS классы решить. Создаешь класс с нужным псевдоэлементом и переключаешь через classList.add/remove. Работает просто и надёжно. Какой контент планируешь менять?

4

data атрибуты работают отлично для этого. В CSS делаешь content: attr(data-before), а в JS просто element.setAttribute(‘data-before’, ‘пока’). Раньше мучился с getComputedStyle, пока не нашёл этот способ. Супер удобно когда надо динамически подставлять текст из переменных