join: new@juude

get alerts for new articles

CLOSE WINDOW

quote marks

Quotation Marks - Gigantic

Before and After

To add and style quotation marks in your CSS you need to be able to use the pseudeo elements before and after.
Some of this information is a repeated from the CSS page.

q:before{ }
q:after{ }

These elements are also used in conjunction with the content property.

q:before{
content:
}

Define the Mark

You also need to define the actual quotation marks. The following code with give you correct quotation marks. You do not actually type any quote marks in the html.

\201C :Opening double quotes
\201D :Closing double quotes
\2018 :Opening single quotes
\2019 :Closing single quotes

For the opening double quote mark:
q:before {
content: '\201C';
}

And.. for the closing double quote mark:

q:after {
content: '\201D';
}

Then add the font and font size. This way you can use a different font for the quote mark than you do for the rest of the text. I would never use Times New Roman for the copy but their quote marks are rather nice.

q:before {
content: '\201C';
font: Times New Roman;

font-size: 200%;
}

You can chose a different font from the one you are using form your copy. I have chosen Times New Roman.

this is the quote

Gigantic Quotes and Enormous Text

Obviously you can enlarge the quote marks and text size by giving a higher font size but this can result in two problems, the lack of space between the text and the quote marks on the right and left and too much space between the top of the text and the quotes. You need to give the text some breathing room on the left and right and also move it up to close the gap between the top of the text and the quotes. Example above.

First create a span around the text (inside the <q> tags) and give it a class, I have called mine gigantic.

Html

<q><span class="gigantic">this is the quote</span></q>

To resolve the lack of space between the the quotes and the text on the left and right add padding to the before and after.
To close the gap at the top give the span a negative margin at the top. Finally give font sizes to your text and quotes.

CSS

.gigantic {
margin-top: -14px;
height: auto;
font-size:2em;
}
q:before {
content: '\201C';
font-size: 60px;

font-family: Times New Roman;
padding-right: 14px;
}
q:after {
content: '\201D';
font-size: 60px;

padding-left: 10px;

font-family: Times New Roman;
}