如何调整CSS添加的引号符号的边距

Question

我正在尝试仅使用CSS添加引号。这有效，但我想降低它们内部内容的引号。这就是它目前的样子：

HTML：

<p id="quote">This is a quotation.</p>

CSS：

#quote {
}

#quote:before {
    content: "\201C";
    font-family: Garamond, Palatino, Roman, "Times New Roman", serif;
    font-size: 36pt;
}

#quote:after {
    content: "\201D";
    font-family: Garamond, Palatino, Roman, "Times New Roman", serif;
    font-size: 36pt;
}

和JS Fiddle。

我已尝试向#quote:before和#quote:after添加上边距，但这似乎也适用于引号之间的文字（即使我特意添加零或负上边距） 。我也尝试过填充并制作各种元素内联块。

有没有办法只使用CSS移动引号？我宁愿避免改变HTML结构或添加图像，我觉得这应该是可能的。

Answer 1

尝试添加：

position: relative;
top: 19px;

到#quote:before和#quote:after。

我还在两个引号中添加了一些填充...

JSFiddle：http://jsfiddle.net/leniel/GAaBT/

Answer 2

原因是您已将font-size属性应用于引号而不是文本，这就是引号变大的原因。试试这个。

#quote {
    font-size:36px;
}

#quote:before {
    content: "\201C";
}

#quote:after {
    content: "\201D";
}