How to rotate the arrow given by after js?

Question

css

Hi all.
There is a menu

Arrows that are set on the right using after for the li element

.b-sidebar__menu__item::after{
  position: absolute;
    top: 24px;
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid #000000;
    border-width: 1px 0 0 1px;
    transform: rotate(135deg);
    right: 20px;

}

How to change rotate when clicking on a menu item? What would the arrow look down or through after it will not work?
I get the elements like this

var item = document.getElementsByClassName('b-sidebar__menu__item');
      for (var i = item.length - 1; i >= 0; i--) {
        item[i].onclick = function(){
          
        }
      }

Answer 1

On click, add a class to the element, and in css edit the transform for :after of this element.
Those. css will become something like this:

.b-sidebar__menu__item::after{
  position: absolute;
    top: 24px;
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid #000000;
    border-width: 1px 0 0 1px;
    transform: rotate(135deg);
    right: 20px;
}

.b-sidebar__menu__item--clicked::after{
  transform: rotate(77deg);
}

Answer 2

Solved a problem. It didn’t work correctly because the li has an a tag that didn’t have an href and the page was updated with each click and js didn’t work.
Put href=# and it worked)

var item = document.getElementsByClassName('b-sidebar__menu__item');
      for (var i = item.length - 1; i >= 0; i--) {
        item[i].onclick = function(){
          this.classList.add('b-sidebar__menu__item--clicked');
        }
      }