css - Not Able to Add Arrow After /Before Content to Bootstrap Button Group with Active Class -

can please take @ demo , let know why not able add arrow content active btn in bootstrap button group?

@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>

it appears want change persist, when button selected. currently, working when button has :active pseudo-class (when button being pressed) — works fine. however, not stay when mouse click goes up, require :focus pseudo-class.

this require add selector .btn:focus, so:

.btn:focus::after 

---

see below snippet working example.

@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>