user1760110 user1760110 - 3 months ago 38
CSS Question

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

Can you please take a look at this demo and let know why I am not able to add arrow content to

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>




Answer

It appears you want the change to persist, when the button is selected. Currently, it is working when the button has the :active pseudo-class (when the button is being pressed) — this works fine. However, it will not stay when the mouse click goes up, which would require the :focus pseudo-class.

This would require that you add the selector .btn:focus, like so:

.btn:focus::after

See the below snippet for a 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>

Comments