How can I adjust the margins of quote symbols added with CSS

paiswifintio

New Member
I'm trying to add quotation marks using only CSS. This works, but I'd like to lower the quotation marks with respect to the content inside them. This is how it currently looks:
tTrBJ.png
The HTML:\[code\]<p id="quote">This is a quotation.</p>\[/code\]The CSS:\[code\]#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;}\[/code\]And a JS Fiddle.I've tried adding a top margin to \[code\]#quote:before\[/code\] and \[code\]#quote:after\[/code\] but this seems to apply to the text between the quotes too (even if I specifically add a zero or negative top margin to that). I've also tried padding and making the various elements inline blocks.Is there a way to move just the quotes down using CSS? I'd rather avoid changing the HTML structure or adding images, and I feel this ought to be possible.
 
Back
Top