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:
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.