CSS border above and below but not full width

Question

I am attempting to define a global style for block-quotes on a site I'm working on.

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.

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.

This is as far as I've gotten so far, but the lines are not centered properly.

Answer 1

If the width is fixed you can use negative margin-left to center element. In your case margin-left: -20%;:

blockquote { 
    margin: 0 auto;
    position: relative;
    text-align: center;
    display: table;
    font-size: 15px;
}
blockquote:before, blockquote:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;         /* <-- put left edge in the middle */
    margin-left: -20%; /* <-- shift to the left by half of the width */
    width: 40%;
    height: 1px;
    background: #000;
}
blockquote:after {
    top: inherit;
    bottom: 0;
}

<blockquote>
  Neque porro quisquam e porro quisquest qui dolorem ipsum quia dolor sit<br>
 est qui dolorem ipsum quia dolor sit amet rem ipsum quia 
</blockquote>