Adding quotation marks with p:before and after with 'content' : p.before « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. p.before

Adding quotation marks with p:before and after with 'content'

    

<!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>There is a tendency for things to right themselves.</p>
 <cite>Ralph Waldo Emerson</cite>
</blockquote>


</body>
</html>








Related examples in the same category

1.p: before {content: "Quick Tip: "}
2.p:before content: url(images/pencil.gif);
3.p:before {content: counter(paragraphNumber, upper-roman) ": ";}
4.p:before {content:attr(class) ": ";}
5.This paragraph contains a note, the image has been added using the :before pseudo-element.
6.p.note:before, p.note:after