title: CSS active class not working for tab content
body: <p>I'm trying to set the left border of the list item with <code>Link</code> text to red on active, and when the user clicks another list item, the previous border is set to the original and the successive list item is then set to a red left border. I tried with an <code>:active</code> class, but that is not working correctly:</p>
  
  <pre><code>      &lt;ul class="list-group"&gt;
          &lt;li class="2" data-toggle="collapse" data-target="#2" aria-expanded="false"&gt;Link&lt;/li&gt;
        &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong> </p>
  
  <pre><code>li {
    list-style-type: none;
  }
  
  .list-group li:active {
    border-left: 3px solid #ce2523;
    padding-left: 7px;
    color: #000000;
  }
  </code></pre>
  
  <p>JSFIDDLE: <a href="https://jsfiddle.net/vxz7zrg9/" rel="nofollow noreferrer">LINK</a></p>