複数行のコンテンツを含む blockquote のスタイリング

Styling blockquote using CSS was something that we didn't really use at first as we always had problems displaying the last quotation mark when using more than one line worth of text.
This led us to spend a morning writing the code below which transforms div and paragraph into inline elements.
Once we had solved this problem though, the child items would literally run up against each other. To circumvent this, we have added pseudo classes to the items with line break. By setting this line break to a block element it also looks almost seamless with the rest of our content.

In our CSS we have also used padding on the quotations to give it a better spacing.

CSS

q, blockquote {quotes: "\201C" "\201D" "\2018" "\2019";}q p, blockquote p,q div, blockquote div{display:inline;}q p:not(:last-child)::after, blockquote p:not(:last-child)::after,q div:not(:last-child)::after, blockquote div:not(:last-child)::after{content:"\a";display: block;white-space: pre;}q:before, blockquote:before {content: open-quote;font-size: 2.5em;display:inline;vertical-align: middle;font-family: monospace;}q:after, blockquote:after {content: close-quote;font-size:2.5em;display:inline;vertical-align: middle;font-family: monospace;}

HTML

<blockquote>
   <p>Styling blockquote using CSS was something that we didn't really use at first as we always had problems displaying the last quotation mark when using more than one line worth of text.</p>
   <p>This led us to spend a morning writing the code below which transforms div and paragraph into inline elements.</p>
   <p>Once we had solved this problem though, the child items would literally run up against each other. To circumvent this, we have added pseudo classes to the items with line break. By setting this line break to a block element it also looks almost seamless with the rest of our content.</p>
</blockquote>