Ion-tab :after css selector

Ionic Framework ionic-v3
1

Hey guys,

I’m currently having trouble figuring things out. I have three 's inside , and I’d like each of the three to have separate scss :after property. Right now what I did was:

  1. run ionic serve --lab
  2. right click on tab and inspect it
    And here i found out that each of these three tabs has their individual # which goes like id=“tab-t1-0”, tab-t1-1 and tab-t1-2. Issue is, these numeric values change each time user clicks on the tab.
    My code so far:
    tabs.html
<div class="tabs-wrapper">
  <ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="home" class="home_tab"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="search" class="search_tab"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="cog" class="cog_tab"></ion-tab>
  </ion-tabs>
</div>

tabs.scss

 page-tabs {
    .tabs-wrapper {
      #tab-t0-0 {
        position: relative !important;
      }
      #tab-t0-0:after {
        content: '' !important;
        width: 1px !important;
        position: absolute !important;
        right: 0 !important;
        top: 25% !important;
        height:50% !important;
        background-color: #013374 !important; // The color of your border
      }
      #tab-t0-1 {
        padding-right: 30% !important;
        padding-left: 30% !important;
      }
      #tab-t0-2 {
        position: relative !important;
      }
      #tab-t0-2:after {
        content: '' !important;
        width: 1px !important;
        position: absolute !important;
        left: 0 !important;
        top: 25% !important;
        height:50% !important;
        background-color: #013374 !important; // The color of your border
      }
}

And I’m having trouble accessing specific tab scss by id or classname.
Any ideas?

2

accessing those with your defined class name should work fine can you let me know the scss that you used with class names instead of id