Ng-Bootstrap活性药添加下拉列表未显示

Question

我将我的Angular-6项目用于ng-bootstrap，并使用了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;
}

我试图做这张照片

谢谢。

Answer 1

此解决方案不需要.svg即可工作。

::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