Using content property to add quotation marks to blockquote : Quotation « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Quotation

Using content property to add quotation marks to blockquote

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">

blockquote p:before {
 content: "\201C"; 
 font-size: 1.2em;
 font-weight: bold;  
 font-family: Georgia, Times, "Times New Roman", serif;
}
blockquote p:after {
 content: "\201D"; 
 font-size: 1.2em;
 font-weight: bold;
 font-family: Georgia, Times, "Times New Roman", serif;
}
cite:before {
 content: "\2014 ";
}

cite {
  display: block;
  text-align: center;
}

  </style>

</head>

<body>

<blockquote>
 <p>This is a test.</p>
 <cite>Emerson</cite>
</blockquote>


</body>
</html>








Related examples in the same category

1.Text wraps quotations
2.Quotation style
3.Quotations
4.Quotation with quotation mark image
5.Sidebar with links, text and quotations
6.Quotation with background
7.Quotation with left bar
8.Quotation with quotation mark
9.Quotation Example
10.Using div to create quotation box
11.Content and quotation
12.Quotation on the right, wrap with text
13.Paragraph wraps around quotation
14.Using classes and CSS overrides to create an alternate pull quote
15.Creating pull quotes in CSS
16.Quote with border