Как скрыть псевдоэлемент а потом опять показать при нажатии на кнопку?

Question

Как скрыть псевдоэлемент ::before а потом опять показать при нажатии на кнопку?
Приложены попытки в css (при нажатии на кнопку), но оно работает, только пока кнопка нажата.

.pseudo-parent {
 height: 300px;
 width: 100%;
 background: red;
 position: relative;
}
.pseudo-parent::before {
   content: 'pseudo';
   width: 60px;
   height: 60px;
   background: white;
   position: absolute;
   left: 43%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.button-hider:active ~ .pseudo-parent::before {
   display: none !important;
}

<button class="button-hider">Кнопка</button>

<div class="pseudo-parent">

</div>

Answer 1

JS:

document.querySelector('.button-hider').addEventListener('click', () => {
    document.querySelector('.pseudo-parent').classList.toggle('hide-before');
});

CSS: (правило вставить после основного)

.hide-before:before {
    display: none;
}

БЛОГ НА HUSL

Как скрыть псевдоэлемент а потом опять показать при нажатии на кнопку?

Ответы (1 шт):