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但这似乎也适用于引号之间的文本（即使我专门添加了一个零或负的上边距）。我也尝试过填充和制作各种元素内联块。

有没有办法使用 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";
}