title: Adding quotes to blockquote
body: <p>I need a blockquote centered in page with double quotes before and after it <a href="http://plnkr.co/edit/4dyhFZGZMqCQhLVMA6tF?p=preview" rel="nofollow noreferrer">Plunker Example</a>:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;      
    &lt;blockquote&gt;
      &lt;p&gt;Quote text&lt;/p&gt;
    &lt;/blockquote&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have the following CSS:</p>
  
  <pre><code>.wrapper {
    text-align: center
  }
  
  blockquote {
    margin: 0 auto;
    max-width: 400px;
  }
  
  blockquote:after, blockquote:before {
    color: @green;
    font-size: 8.0rem;                                      
    line-height: 0.8;
  
  } 
  
  blockquote:after {                                                       
    content: close-quote;
    vertical-align: bottom;
  }
  
  blockquote:before {                                     
    content: open-quote;
    vertical-align: top;
  }
  
  p {
    text-align: left;                                 
      font-size: 1.125rem;
    font-style: italic;
  } 
  </code></pre>
  
  <p>Somehow my quotes are placed before and after blockquote.</p>
  
  <p>I would like the opening one to be on top left position and the closing one to be on bottom right position ...</p>
  
  <p>How can I do this?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Something that looks like this:
  <a href="https://i.stack.imgur.com/gH9GO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gH9GO.png" alt="blockquote"></a></p>