Clever Geek Handbook

How to customize quote character fields added with CSS

I am trying to add quotes using CSS only. This works, but I would like to omit the quotes regarding the content inside them. This is what it currently looks like:

Screen grab of high quotation marks

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;
}

And JS Fiddle .

I tried adding a top margin to #quote:before

and #quote:after

, but that seems to be the case for the text between the quotes as well (even if I specifically add a zero or negative top marker to it). I've also tried filling and creating various inline-block elements.

Is there a way to move just the quotes down with CSS? I would rather avoid changing the HTML structure or adding images, and I believe this should be possible.

+3


source to share


2 answers


Try adding:

position: relative;
top: 19px;

before #quote:before

and #quote:after

.



I've also added some additions to both quotes ...

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

+1


source


The reason is that you applied the font-size property to quotes instead of text, so the quotes got big. Try it.



#quote {
    font-size:36px;
}

#quote:before {
    content: "\201C";
}

#quote:after {
    content: "\201D";
}
0


source






More articles:


All Articles