Html 在当前选项卡按钮下添加下划线

我创建了三个按钮，分别对应三个不同的选项卡

有没有办法在当前选项卡按钮下（红色“区域”下）添加下划线

我基本上打算买一些像mat tab的东西

有人能帮我吗

代码

 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>

viewMode='tab1'；


您可以使用将下划线添加到活动按钮：

.activebtn{
/*这是为了使：：before伪元素完全
相对于按钮定位*/
位置：相对位置；
}
.activebtn:：之前{
内容：''；
/*相对于按钮绝对定位下划线*/
位置：绝对位置；
/*这将对齐下划线，使其位于页面底部
按钮*/
底部：0；
左：0；
宽度：100%；
高度：2倍；
背景：蓝色；
}


您可以使用将下划线添加到活动按钮：

.activebtn{
/*这是为了使：：before伪元素完全
相对于按钮定位*/
位置：相对位置；
}
.activebtn:：之前{
内容：''；
/*相对于按钮绝对定位下划线*/
位置：绝对位置；
/*这将对齐下划线，使其位于页面底部
按钮*/
底部：0；
左：0；
宽度：100%；
高度：2倍；
背景：蓝色；
}
非常感谢您的回复。这里的问题是，如果单击另一个按钮两次，下划线就会改变。有没有办法一次只点击另一个按钮，下划线就会变成那个按钮？对不起，我不知道如何使用Angular，所以我不能告诉你为什么要点击两下才能显示下划线。希望有人能回答这个问题！解决了的。。。问题是这个动画[@slideInOut]甚至没有声明。这足以移除它，它是完美的！谢谢非常感谢你的回复。这里的问题是，如果单击另一个按钮两次，下划线就会改变。有没有办法一次只点击另一个按钮，下划线就会变成那个按钮？对不起，我不知道如何使用Angular，所以我不能告诉你为什么要点击两下才能显示下划线。希望有人能回答这个问题！解决了的。。。问题是这个动画[@slideInOut]甚至没有声明。这足以移除它，它是完美的！谢谢我认为一种让他们在下面加下划线的方法是在按钮上添加一个链接。这是一种简单、懒惰的方法。我相信一种让他们在下面有下划线的方法是在按钮上添加一个链接。这是一种简单、懒惰的方式。