样式blockquote与纯css

Question

我正在尝试将blockquote设置为如下样式：

目前它看起来像这样：

（它应该是在blockquote开头没有空格

我的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*/

我正在寻找像position: relative; left: -15px;这样的东西，但它应该比它更可靠 这（不同窗口尺寸的更可靠的手段......哦，它应该是纯粹的css ......; - ））

您是否知道解决方案问题不会留下任何不必要的空间？

Answer 1

我添加了一个浮动并更改了顶部/左侧定位声明。

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;
}

这是输出。我没有尝试匹配你的字体和颜色。

Answer 2

position: relative上blockquote，您可以轻松地使用position: absolute定位伪元素。请参阅此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;
}