Question

请您看看这个演示，并告诉我为什么我无法在Bootstrap按钮组中向active btn添加箭头内容？

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


.btn-group .btn.active, .btn:active::after {
  content: "";
  position: absolute;
  border-bottom: 10px solid red;
  border-left: 10px solid #333;
  border-right: 10px solid #333;
}

<div class="btn-group">
  <button type="button" class="btn btn-default">One</button>
  <button type="button" class="btn btn-default">Two</button>
  <button type="button" class="btn btn-default">Three</button>
</div>

Answer 1

当选择按钮时，您似乎希望更改保持不变。目前，当按钮具有:active伪类时（当按下按时），它正在工作 - 这样可以正常工作。但是，当鼠标单击时，它将不会停留，这将需要:focus伪类。

这需要您添加选择器.btn:focus，如下所示：

.btn:focus::after

请参阅下面的代码段以获取工作示例。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


.btn-group .btn:focus::after {
  content: "";
  position: absolute;
  border-bottom: 10px solid red;
  border-left: 10px solid #333;
  border-right: 10px solid #333;
}

<div class="btn-group">
  <button type="button" class="btn btn-default">One</button>
  <button type="button" class="btn btn-default">Two</button>
  <button type="button" class="btn btn-default">Three</button>
</div>

无法在内容之后/之前添加箭头以使用活动类

1 个答案: