css - Ng-Bootstrap アクティブ ピルを追加してドロップダウンを表示しない

Question

私はng-bootstrapに Angular-6 プロジェクトを使用し、 ngbootstrap-pills を使用しました。ボタンオプションを削除してドロップダウンアイコンにアクティブなピルを追加しようとしましたが、機能しません。誰もがそれを正しく行う方法を知っています。

ここにスタックブリッツコードがあります

これは私の.cssコードです

.nav-pills .nav-link.active, .nav-pills.show> .nav-link {
    color: #fff;
    background-color: #262262;
}

a:after {
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

この画像のようにしてみました

ありがとう。