Blockquote citation symbols bleeding outside contentbox - html

Question

I have a blockquote, where the citation symbols is generated with CSS Content, using pseudo-selectors :before and :after like so:
div.paragraph blockquote::before, div.paragraph blockquote::after {
font-size: 4em;
color: #999;
position: absolute;
}
div.paragraph blockquote::before {
content: "“201C";
top: 0;
left: 0;
}
div.paragraph blockquote::after {
content: "”201D";
bottom: 0;
right: 0;
}
This generates a blockquote that looks like this:
What I want, is to make the citationsymbols stay inside their respective boxes, so that their baselines would be the same as the text inside the blockquote.
I figure this has something to do with the citationsymbols natural baseline, but perhaps someone can elaborate?
One way to fix it could be to give the citationsymbols a negative margin of its relative font-size, but I'm looking for a more "correct" solution, or an explanation as to why citationsymbols act like this.
EDIT: Adding position:relative; to div.paragraph does not fix this problem, as it already has position:relative.

Answer 1

<style>
div.paragraph{
width:50%;
margin:auto;
}
div.paragraph blockquote{
position:relative;
}
div.paragraph blockquote::before, div.paragraph blockquote::after {
font-size: 4em;
color: #999;
}
div.paragraph blockquote::before {
content: "“";
top:-0.4em;
left: -0.6em;
position: absolute;
}
div.paragraph blockquote::after {
content: "”";
right: 0;
position: absolute;
}
</style>
<div class='paragraph'>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<blockquote>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</blockquote>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
It seems you need to set the "div.paragraph blockquote" as relative, which is treated as the parent container of before and after contents

Answer 2

OK I understand your problem, what you have do is add css for:
div.paragraph {position:relative; }
This defines context for its child