Переключить стрелку при нажатии раскрывающегося меню (Bootstrap 4)

Question

Bootstrap 4 имеет каретку по умолчанию, при нажатии на раскрывающееся меню я хочу изменить каретку как стрелку вверх.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false">Dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Демо

Answer 1

Вы можете выбрать псевдоэлемент ::after и повернуть его на 180 градусов, когда появится раскрывающийся список:

  .dropdown.show button::after {
    transform:rotate(180deg);
  }

Демо