如何調整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小提琴 。

我已經嘗試在#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";
}