html - 使用纯 css 设计 block 引用

Question

我正在尝试将 block 引用样式设置为如下所示:

目前看起来像这样:

( block 引用开头应该没有空格

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

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

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

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