join: new@juude



get alerts for new articles






CLOSE WINDOW

join: new@juude



get alerts for new articles






CLOSE WINDOW
quote marks

Quotation Marks - CSS


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. The following are some examples of when they could be used.

p:after{ }
a:after{ }
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

Now you have 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 always use a sans serif for the copy but the quote marks for Times New Roman are rather nice.

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

font-size: 200%;
}