У псевдоэлемента кнопки нет cursor pointer при наведении, как исправить?

Question

[MashutaKlencheva]

Есть кнопка с псевдоэлементом (стрелочка). Нужно, чтобы курсор cursor pointer срабатывал и при наведении на псевдоэлемент в том числе. Как это можно сделать?

<li class="menu-bottom__item">
              <button class="menu-bottom__btn btn-reset">Реализм</button>
              <ul class="menu-bottom__drop-list list-reset drop-list">

.menu-bottom__btn {
  position: relative;
  color: white;
  cursor: pointer;
}

.menu-bottom__btn::after {
  content: "";
  position: absolute;
  top: 30%;
  left: calc(100% + 5px);
  z-index: 2;
  width: 7px;
  height: 7px;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-top: none;
  border-left: none;
  pointer-events: none;
  transform: rotate(45deg);
}

Comments

[MashutaKlencheva]

Прокрался поинтер-ивентс, если его убрать, то в расстоянии между кнопкой и стрелочкой указатель "прыгает" из состояния в состояние. Хотелось бы, чтобы этого не было.

[Ankhena]

MashutaKlencheva, довольно странное поведение для пользователя - не иметь возможности нажать на саму стрелочку.
И в связи с этим вопрос: зачем стрелка вынесена из кнопки и зачем ей pointer-events?

[MashutaKlencheva]

Ankhena, вынести стрелку было неудачным решением. Я остановилась на том, что добавила кнопке внутренний отступ справа, поместив туда стрелку. Поинтер ивентс убрала. Теперь все работает, в том числе хорошо стилизуются различные состояния по макету. Сама разметка была корявая, признаю.

Answer 1

[Temur__k]

Убери у псевдоэлемента свойство pointer-events: none, тогда должен сработать

Answer 2

[Ербол]

cursor: pointer !important;