Аккордеон 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;
}