如何在一个按钮下面放一条线？ [英] How do I put a line under a button when its selected?

问题描述

我有3个按钮：

 < div& 
<！ - 第一个按钮 - > 
< button md-button 
（click）=setState（0）
 class =md-primary> Button 1 
< / button> 
 
<！ - 第二按钮 - > 
< button md-button 
（click）=setState（1）
 class =md-primary> Button 2 
< / button> 
 
<！ - 第三按钮 - > 
< button md-button 
（click）=setState（2）
 class =md-primary> Button 3 
< / button> 
< / div> 
  

这只是给我三个按钮，并根据点击执行操作。

现在我想指明哪个按钮当前被点击，所以我想为按钮添加下划线，我该如何做？

感谢

解决方案

您可以使用伪元素

  button {position：relative;} button.selected：after {content：''; position：absolute; left：0; top：calc（100％+ 6px）; width：100％; height：4px; background：red;}  

 < div& <！ - 第一按钮 - > < button md-button（click）=setState（0）class =md-primary>按钮1< / button> <！ - 第二按钮 - > < button md-button（click）=setState（1）class =md-primary selected> Button 2< / button> <！ - 第3按钮 - > < button md-button（click）=setState（2）class =md-primary> Button 3< / button>< / div>   

I have 3 buttons:

<div>
  <!-- 1st button -->
  <button md-button
          (click)="setState(0)"
          class="md-primary">Button 1
  </button>

  <!-- 2nd button -->
  <button md-button
          (click)="setState(1)"
          class="md-primary">Button 2
  </button>

  <!-- 3rd button -->
  <button md-button
          (click)="setState(2)"
          class="md-primary">Button 3
  </button>
</div>

this just present me three buttons, and im doing actions based on the click.

now I want to indicate which button is currently clicked so I wanted to add underline for the button, how can I do that?

it should be visible untill a new button was clicked and then the line should be moved to the newely clicked button

thanks

解决方案

You could use a pseudo element

button {
  position: relative;
}
button.selected:after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 100%;
  height: 4px;
  background: red;
}

<div>
  <!-- 1st button -->
  <button md-button
          (click)="setState(0)"
          class="md-primary">Button 1
  </button>

  <!-- 2nd button -->
  <button md-button
          (click)="setState(1)"
          class="md-primary selected">Button 2
  </button>

  <!-- 3rd button -->
  <button md-button
          (click)="setState(2)"
          class="md-primary">Button 3
  </button>
</div>

这篇关于如何在一个按钮下面放一条线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！