Hinzufügen von Pfeil nach/vor Inhalt zum Bootstrap Button Gruppe mit aktiver Klasse

Question

Können Sie bitte einen Blick auf diese Demo werfen und wissen, warum ich keinen Pfeilinhalt zu active btn in der Bootstrap-Schaltflächengruppe hinzufügen kann?

@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

Es scheint, dass Sie die Änderung, bestehen bleiben soll, wenn die Schaltfläche ausgewählt ist. Momentan funktioniert es, wenn die Taste die :active Pseudoklasse hat (wenn die Taste gedrückt wird) — das funktioniert gut. Es wird jedoch nicht bleiben, wenn der Mausklick hochgeht, was die Pseudo-Klasse :focus erfordern würde.

Dies würde erfordern, dass Sie den Wähler .btn:focus, wie so hinzufügen:

.btn:focus::after 

---

die unten stehende Snippet für ein Arbeits Beispiel.

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