Добавить подчеркивание под кнопкой текущей вкладки

Question

Я создал три кнопки, которые соответствуют трем различным вкладкам.

Есть ли способ добавить подчеркивание под кнопкой текущей вкладки (под красной "зоной")?

Я в принципе намеревается получить что-то вроде mat-tab.

Может кто-нибудь мне помочь?

DEMO

Код

 viewMode = 'tab1';

 <div class="d-flex flex-nowrap myrow">
    <a (click)="viewMode ='tab1';" class="btn" [class.activebtn1]="viewMode == 'tab1'" rel="tab1">TAB1 BUTTON
    </a>
    <a (click)="viewMode ='tab2'" class="btn" [class.activebtn]="viewMode == 'tab2'" rel="tab2">TAB2 BUTTON
    </a>
    <a (click)="viewMode ='tab3'" class="btn" [class.activebtn]="viewMode == 'tab3'" rel="tab3">TAB3 BUTTON
    </a>
  </div>

 <div [ngSwitch]="viewMode" style="margin-top:50px">
    <div id="tab1" *ngSwitchCase="'tab1'" [@slideInOut]>
   <span>TAB1</span>
    </div>
    <div id="tab2" *ngSwitchCase="'tab2'" [@slideInOut]>
       <span>TAB2</span>
    </div>
    <div id="tab3" *ngSwitchCase="'tab3'" [@slideInOut]>
        <span>TAB3</span> 
    </div>
</div>

Пример

Answer 1

Демо

---

Вы можете использовать псевдоэлементы , чтобы добавить подчеркивание к активной кнопке:

.activebtn {
  /* This is set so that the ::before pseudo-element is absolutely 
     positioned relative to the button. */
  position: relative;
}

.activebtn::before {
  content: '';

  /* Absolutely positions the underline relative to the button. */
  position: absolute;

  /* This aligns the underline so that it is at the bottom of 
     the button. */
  bottom: 0;

  left: 0;
  width: 100%;
  height: 2px;
  background: blue;
}