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

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

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

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

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

мой способ это при нажатии на кнопку в элементе добавлять ему еще один класс и в 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");
}

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

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