Работа с CSS псевдоэлементами через JavaScript и jQuery

Часто разработчики сталкиваются с необходимостью манипулировать CSS псевдоэлементами, такими как ::before или ::after, через JavaScript или jQuery. Например, в стилевом файле CSS может быть правило, которое добавляет псевдоэлемент ::after с определенным содержимым к элементам с классом example:

.example::after {
  content: 'original content';
}

Возникает задача изменить это содержимое с ‘original content’ на ‘new content’ с использованием JavaScript или jQuery. К сожалению, прямое взаимодействие с псевдоэлементами ::before и ::after через JavaScript или jQuery невозможно, так как они не являются частью DOM.

Однако есть обходные способы решения этой задачи.

Использование JavaScript

Один из подходов — изменить CSS-правила для псевдоэлемента ::after через JavaScript. Можно добавить новое правило в стилевой элемент на странице:

let style = document.createElement('style');
style.innerHTML = `
  .example::after {
    content: 'new content';
  }
`;
document.head.appendChild(style);

В этом случае, когда браузер перерисовывает страницу, он найдет новое CSS-правило и применит его, заменяя содержимое псевдоэлемента ::after на ‘new content’.

Использование jQuery

С помощью jQuery можно воспользоваться методом .css(), чтобы изменить CSS-свойства элемента. Однако, как уже отмечалось, псевдоэлементы не являются частью DOM, и изменение их свойств напрямую не будет работать.

Вместо этого можно изменить CSS-класс самого элемента, а затем в CSS-файле определить новый класс с нужным свойством content для псевдоэлемента ::after:

$('.example').addClass('new-class');

И в CSS-файле:

.new-class::after {
  content: 'new content';
}

Это решение требует некоторой предварительной подготовки и хорошо подходит для ситуаций, когда возможные значения content известны заранее.