title: Left border on li elements to mark active item
body: <p>I've searched for this and can't seem to find a decent solution.</p>
  
  <p>I'm trying to make a left border on a given <code>&lt;li&gt;</code> element so it marks the active option. The effect I'm going for is similar to Gmail where they mark the open folder with a red border, e.g:</p>
  
  <p><a href="https://i.stack.imgur.com/hwdRn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hwdRn.png" alt="enter image description here"></a></p>
  
  <p>I inspected how it's done on Gmail but looks like a series of <code>&lt;div&gt;</code>'s. I'm just trying to do it with list items.</p>
  
  <p>I have this: <a href="https://jsfiddle.net/5txj3dpe/2/" rel="nofollow noreferrer">https://jsfiddle.net/5txj3dpe/2/</a></p>
  
  <p>So my markup is straightforward - a set of list items, with a <code>.active</code> applied to the active element ("Item 2" in this case):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list-container {
    border:1px solid #ccc;
    margin-left: 0;
    padding-left: 0;
  }
  
  li {
    list-style: none;
  }
  
  li.active {
    border-left: 4px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list-container"&gt;
    &lt;ul&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li class="active"&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
      &lt;li&gt;Item 4&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to make it so that the red border is flush with the <code>.list-container</code> and there is some space between the red border and the text. Basically I want to make it look similiar to the Gmail screenshot.</p>
  
  <p>Please can anyone advise how to do this. Is it possible with an unordered list, or do I need additional <code>&lt;div&gt;</code>'s, etc?</p>