title: Bootstrap 4: Bottom border only on li elements
body: <p>I'm making a sidebar that needs to have a bottom border after every li element, except the last one. But Bootstrap 4 already has borders on list-group-items and if I add border-0 it removes them completely. And I can't seem to figure out how to edit this via CSS so it works. It only displays one bottom border after the last li element. </p>
  
  <p>Here's a quick image preview of what I'm trying to make: </p>
  
  <p><a href="https://i.stack.imgur.com/7W0gC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7W0gC.png" alt="enter image description here"></a></p>
  
  <p>And here's my code:</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>.sidebar {
      position: fixed;
      z-index: 9999;
    }
    .menu {
      position: fixed;
      background-color: #fff;
      height: 100vw;
      width: 90px;
      top: 60px;
      overflow: hidden;
      .list-group-item {
        border: 0;
      }
      a {
        color: gray;
        font-size: 16px;
        span {
        white-space: nowrap;
      }
      }
    }
    .menu:hover {
      width: 260px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sidebar"&gt;
        &lt;ul class="list-group flex-column d-inline-block menu"&gt;
          &lt;li class="list-group-item py-2"&gt;
            &lt;a href="#"&gt;
              &lt;span class="align-middle"&gt;&lt;img src="https://placehold.it/50x50" height="50" class="mr-4"&gt;Text&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt; &lt;!-- /.list-group-item --&gt;
          
          &lt;li class="list-group-item py-2"&gt;
            &lt;a href="#"&gt;
              &lt;span class="align-middle"&gt;&lt;img src="https://placehold.it/50x50" height="50" class="mr-4"&gt;Text&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt; &lt;!-- /.list-group-item --&gt;
          
          &lt;li class="list-group-item py-2"&gt;
            &lt;a href="#"&gt;
              &lt;span class="align-middle"&gt;&lt;img src="https://placehold.it/50x50" height="50" class="mr-4"&gt;Text&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt; &lt;!-- /.list-group-item --&gt;
          
        &lt;/ul&gt;
      &lt;/div&gt; &lt;!-- /.sidebar --&gt;</code></pre>
  </div>
  </div>
  </p>