html - 如何调整用 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 添加上边距，但这似乎也适用于引号之间的文本(即使我特别为此添加了零或负的上边距)。我也尝试过填充和制作各种元素内联 block 。

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

Answer 1

尝试添加:

position: relative;
top: 19px;

#quote:before 和#quote:after。

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

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