Как обратиться к псевдоэлемунту after через js?

Question

[hujak_hujak]

У меня есть див с псевдо элементом after, я хочу при нажатии на кнопку добавить ему свойство css, как это сделать?

Answer 1

[Defman21]

Можно добавлять класс к самому диву.

.test {
  &:after { content: "hello"; }
  &.clicked:after { color: red; }
}

https://codepen.io/anon/pen/NRNbmp

Answer 2

[MihailDonskoy]

Кароч к самому псевдоэлементу нельза,но можно в элементе,где :after создать с помощью css свойства content: в котором создать селектор с помощью метода attr(data-название селектора ).то есть получиться например content:attr(data-el); а затем обратиться к нему из js var a = this.dataset.el,т таким макаром сможешь переопределить или добавить новые свойства элементу:after.только так.

Answer 3

[ShadXcoder]

мой способ это при нажатии на кнопку в элементе добавлять ему еще один класс и в css указать условие при котором твой псевдоэлемент будет изменяться как только присвоится второй класс и выполнится условие, на бумаге выглядит так:
*HTML*
div class="first"

*STYLE*
.first {
background: red
}
.first.second::after {
*тут стили*
}
*JS*
let div = document.querySelector(".first");
div.addEventListener('click', function () {
div.classlist.toggle("second");
}

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

Comments

[Maks_ytb_444]

Мне помогло, спасибо

Answer 4

[Алексей Уколов]

К сожалению, обратиться к псевдоэлементу из js нельзя. Это Shadow DOM, он из js не виден.