Как с помощью javascript изменить псевдоэлемент before или after?

@francisco.friesen 

Чтобы изменить псевдоэлемент ::before или ::after с помощью JavaScript, вам нужно получить доступ к элементу, к которому они применены, и использовать свойство content для установки нового содержимого и другие свойства для настройки стилей.

Например, чтобы изменить содержимое ::before псевдоэлемента на текст "Hello", вы можете использовать следующий код:

1
2
3

const element = document.querySelector('.my-element');
const beforeElement = window.getComputedStyle(element, ':before');
beforeElement.content = '"Hello"';

Здесь мы сначала получаем ссылку на элемент с классом my-element, к которому применяется псевдоэлемент ::before. Затем мы получаем объект CSSStyleDeclaration для этого псевдоэлемента с помощью функции getComputedStyle. В конечном итоге мы устанавливаем новое значение для свойства content, обернув его в двойные кавычки.

Аналогичным образом, вы можете изменить свойства стиля, такие как background-color, color, font-size и другие, для настройки внешнего вида псевдоэлемента. Например:

1
2
3
4
5

const element = document.querySelector('.my-element');
const beforeElement = window.getComputedStyle(element, ':before');
beforeElement.backgroundColor = 'red';
beforeElement.color = 'white';
beforeElement.fontSize = '20px';

Здесь мы установили красный фон, белый цвет текста и размер шрифта 20 пикселей для ::before псевдоэлемента, примененного к элементу с классом my-element.