5

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.

Mockup of blockquote

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

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;
}
<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>
davidcondrey
  • 34,416
  • 17
  • 114
  • 136

1 Answers1

12

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>
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • This is sweet, add a quick margin-top/margin-bottom of like -10px to the before and after and he has his spacing too, +1 for learning something today :) – Chris W. Nov 10 '14 at 21:18
  • Yes margin-top/bottom or negative top/bottom values to adjust vertical spacing. – dfsq Nov 10 '14 at 21:26
  • @dcc This can be simplified a little using only one pseudo element and border top/bottom : http://jsfiddle.net/webtiki/krnorhwp/ – web-tiki Nov 17 '14 at 08:57
  • @web-tiki In this case I think this pseudo element will overlay content. – dfsq Nov 17 '14 at 09:03
  • @dfsq no, as I used the before pseudo element it is behind the content of the blockquote. you can see that by inspecting with dev tools. – web-tiki Nov 17 '14 at 09:14