title: CSS border above and below but not full width
body: <p>I am attempting to define a global style for block-quotes on a site I'm working on.</p>
  
  <p>The goal is to style the block-quotes so that they appear similar to the image below.  I would like to avoid having to modify the DOM structure.</p>
  
  <p>Using pseudo-classes I would like to display horizontal parallel borders above and below the element but the lines should only be half as wide as the element itself and centered horizontally.</p>
  
  <p><img src="https://i.stack.imgur.com/31rd1.jpg" alt="Mockup of blockquote"></p>
  
  <p>This is as far as I've gotten so far, but the lines are not centered properly.</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>blockquote {
      margin: 0 auto;
      position: relative;
      text-align: center;
      display: table;
      font-size: 15px;
  }
  
  blockquote:before {
      content: '\A';
      height: 1px;
      width: 40%;
      position: absolute;
      background: #000;
      top: -8px;
  }
  
  blockquote:after {
      content: '\A';
      height: 1px;
      width: 40%;
      position: absolute;
      background: #000;
      bottom: -8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;blockquote&gt;
    Neque porro quisquam e porro quisquest qui dolorem ipsum quia dolor sit&lt;br /&gt;
   est qui dolorem ipsum quia dolor sit amet rem ipsum quia 
  &lt;/blockquote&gt;</code></pre>
  </div>
  </div>
  </p>