Css Ng引导活动药片添加下拉列表未显示

我用我的Angular-6项目，我用了，我试着用删除按钮选项将活动药丸添加到下拉图标，但它不起作用，任何人都知道如何正确地这样做

这里有代码

这是我的.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;
}

我试着像这样做

谢谢。

尝试使用：：ng deep selector应用样式。否则，样式将不会应用于库

在您的情况下，它将是：

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

::ng-deep 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;
}

您也可以阅读。

我找到了一些解决方案

您好，我已经修改了一些小的变化，您的代码请检查这个StackBlitz链接

---

希望这将帮助您

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

---

您的样式现在已应用，在它们不起作用之前，我添加了您的解决方案。颜色发生变化，但在药片处未显示箭头

::ng-deep .nav-pills .nav-link.active:after {
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  top: 100%;
  width: 0;
  height: 0;
  border-top: 7px solid #262262;
  border-right: 13px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 15px solid transparent;
}



::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link  {
  display: inline-block;
  position: relative;
  background: #262262;
  padding: 8px 0;

}

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