ng-bootstrap 手风琴将样式应用于子图标

Question

手风琴没有焦点时的明星表演

专注于手风琴时星星消失

这是我的 CSS，用于显示手风琴左侧的星星：

.icon-star2.relevant-source {
  position: absolute;
  margin-left: -5em;
}

这是标记[用 x 替换变量以隐藏敏感信息]：

 <ngb-accordion class="accordion accordion-alternate">
           <ngb-panel class="source-accordion" *ngFor="x">
                            <ng-template ngbPanelTitle>
                                <i *ngIf="x > 0" class="icon-star2 relevant-source"
                                   title="This source contains {{x}} of the top 10 most relevant documents.">
                                </i>
                                <span class="source-link source-link-text">{{x}}</span><span class="float-right source-link">
                                {{x | number:0 }}</span>
                            </ng-template>
                            <ng-template ngbPanelContent>
                                List of documents
                            </ng-template>
                        </ngb-panel>
                    </ngb-accordion>

我的目标是在某些带有标题的手风琴元素旁边添加一个星号。 （本机工具提示）

我尝试了很多方法，但似乎无法解决此问题。有人有什么建议吗？

Answer 1

尝试深度

/deep/ ngb-accordion > ngb-panel> i.icon-star2.relevant-source{
 position: absolute;
 margin-left: -5em;
}