title: How can this type of border be achieved with CSS
body: <p>In the example image you can see the heavy dark lines before and after "Date" and "Name". I am trying to achieve that with CSS. Searched but can't think of what to call it when searching.</p>
  
  <p><a href="https://i.stack.imgur.com/cZPB2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cZPB2.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sort-btn-holder{
    display: inline-block;
  }
  .sort-title{
    display: block;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sort-btns pull-right"&gt;
  
    &lt;div class="sort-btn-holder"&gt;
     &lt;span class="sort-title"&gt;Date&lt;/span&gt;
  
    &lt;button id="desc" class="btn btn-primary" type="button"&gt;
      &lt;img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px"&gt;
    &lt;/button&gt;
  
    &lt;button id="asc" class="btn btn-primary" type="button"&gt;
      &lt;img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px"&gt;
    &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="sort-btn-holder"&gt;
     &lt;span class="sort-title"&gt;Name&lt;/span&gt;
  
      &lt;button id="older" class="btn btn-primary" type="button"&gt;
        &lt;img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px"&gt;
      &lt;/button&gt;
  
      &lt;button id="newer" class="btn btn-primary" type="button"&gt;
        &lt;img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px"&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I was thinking I should use :before or :after.
  Here is a link to the HTML and CSS in a Fiddle: <a href="https://jsfiddle.net/dntbqykk/" rel="nofollow noreferrer">https://jsfiddle.net/dntbqykk/</a></p>