我将我的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; }
我试图做这张照片
谢谢。
此解决方案不需要.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