After running this line of code, I have a generated element sub with a property of [sub].
<li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name="Checkout" id="checkout-menu-icon" [sub]="(products$ | async)?.length"></li>
https://i.sstatic.net/icwKs.png
The alignment of the generated sub element is set to bottom: -.25em;, and I am attempting to customize its styles but none of them are taking effect.
#checkout-menu-icon > a > div > sub {
top: 0 !important;
left: 3px !important;
}
Additionally,
#checkout-menu-icon > a > div > .ng-star-inserted {
top: 0 !important;
left: 3px !important;
}
How can I successfully apply styles to the sub element below?
<li id="checkout-menu-icon" name="Checkout" style="cursor: pointer" template-menu-item="" _nghost-c13="" tabindex="0" ng-reflect-router-link="/request/checkoutReview" ng-reflect-icon="fa-shopping-cart" ng-reflect-name="Checkout" ng-reflect-sub="1" ng-reflect-display-mode="0" class="ng-star-inserted">
<a _ngcontent-c13="" routerlinkactive="active" ng-reflect-router-link="/request/checkoutReview" ng-reflect-router-link-active="active" href="/request/checkoutReview">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<span _ngcontent-c13="" class="ng-star-inserted" style="color: rgb(69, 69, 69);">
<i _ngcontent-c13="" class="fa fa-2x fa-shopping-cart" ng-reflect-klass="fa fa-2x" ng-reflect-ng-class="fa-shopping-cart"></i></span>
<div _ngcontent-c13="" class="tabName" style="color: rgb(69, 69, 69);">Checkout
<!--bindings={
"ng-reflect-ng-if": "1"
}-->
<sub _ngcontent-c13="" class="ng-star-inserted">1</sub>
</div>
</a>
</li>