Ng-Bootstrap active pills to add drop down not showing

Question

I'm used my Angular-6 project for the ng-bootstrap and i used ngbootstrap-pills, i tried to add active pills to drop down icon with removing button option, but its not working, anyone know how to do that correctly.

here with stack blitz code

this is my .css code

.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;
}

I tried to do like this image

Thanks.

Answer 1

This solution doesn't need .svg's to work.

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

::ng-deep .nav-pills .nav-link.active:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;

  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;

  display: block;
  left: 35%;
  bottom: 0;
}

https://stackblitz.com/edit/angular-aticm5-5nnhz3