Style blockquote with pure css - html

Question

I'm trying to style a blockquote to look like this:
At the moment it looks like this:
(it is supposed to be without the white spaces at the beginning of the blockquote
My HTML/CSS
<blockquote><p>Lore ipsum...</p></blockquote>
blockquote {
margin: 1em 2em;
border-left: 1px solid #999;
padding-left: 1em; }
blockquote:before {
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative; left: -15px;
}
blockquote p:first-letter {
margin: .2em .3em .1em 0;
font-size: 220%;
}
/* without unnecessary font type/color attributes*/
I'm looking for something like position: relative; left: -15px;, but it should work much more reliable than
this (more reliable means with different window sizes... oh and it should be pure css... ;-))
Do you know a solution problem that does not leave any unnecessary spaces behind?

Answer 1

I added a float left and changed the top/left positioning declarations.
blockquote:before{
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative;
float: left;
top: .4em;
left: -.15 em;
}
Here is the output. I didn't attempt to match your fonts and colors.

Answer 2

With a position: relative on the blockquote you can easily position the pseudo element with position: absolute. See this jsfiddle demo http://jsfiddle.net/VZxhH/1/
blockquote {
border-left: 1px solid #999;
position: relative;
padding-left: 1em;
margin: 1em 2em;
}
blockquote:before {
content: open-quote;
position: absolute;
font-size: 6em;
left: -38px;
top: -23px;
}