Angular: How to style dynamically generated html?

Question

I have a generated element sub from this line of code with a [sub] property

      <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>

I'm trying to style the sub element that is generated because the alignment is set to bottom: -.25em;

I'm trying to set my own styles for it but none of the styles are being applied.

    #checkout-menu-icon > a > div > sub {
        top: 0 !important;
        left: 3px !important;
    }

and

    #checkout-menu-icon > a > div > .ng-star-inserted {
        top: 0 !important;
        left: 3px !important;
    }

How can I 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>

Answer 1

This issue you're having has to do with how Angular handles view encapsulation. If you add your styles to your main styles.css file that should fix your issue.

Answer 2

Try removing the styles you added and just add the styles below:-

#checkout-menu-icon sub {
   vertical-align: middle;
}