How to change the pseudo element?

Question

css

Hello. I'm trying to change pseudo-element on click. So that the arrow rotates 180 degrees when the list is open. I'm trying to replace an image on click.

<li class="section__top-nav-second-menu-item" id="list-initial-1">
                                Реализм
                            </li>

.section__top-nav-second-menu-item{
    position: relative;
    font-size: var(--fz-18);
    font-weight: var(--fw-400);
    line-height:var(--lh-26);
    font-family: var(--ff-os);
    color: var(--color-white);
    cursor: pointer;
}

.section__top-nav-second-menu-item:not(:last-child){
    margin-right: 111px;
}

.section__top-nav-second-menu-item::after{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    background-image: url('../img/top/arr-bottom.svg');
    background-repeat: no-repeat;
    right: -17px;
    top: 50%;
}

.section__top-nav-second-menu-item:hover::after{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    background-image: url('../img/top/arr-bottom-hover.svg');
    background-repeat: no-repeat;
    right: -17px;
    top: 36%;
}

I do this but it doesn't work, what am I doing wrong?

.section__top-nav-second-menu-item:after .is-active-list{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    background-image: url('../img/top/arr-bottom-view-top.svg');
    background-repeat: no-repeat;
    right: -17px;
    top: 36%;
}

window.addEventListener('DOMContentLoaded', function(){
            document.querySelector('.section__top-nav-second-menu-item').addEventListener('click', function(){
                document.querySelector('.section__top-nav-second-menu-item::after').classList.toggle('is-active-list')
            })
        });

Answer 1

document.querySelector('.section__top-nav-second-menu-item')
  .addEventListener('click', function(event){
    event.target.classList.toggle('is-active-list')
  });

.section__top-nav-second-menu-item.is-active-list::after {
}