css - 如何在内容之后/之前向具有事件类的 Bootstrap 按钮组添加箭头

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>