<div class="credits">
  <span><a href="http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/" rel="bookmark" title="Permanent Link to &quot;Pure CSS Blockquote Styling&quot;">Pure CSS Blockquote Styling</a></span>
  <small>posted on Apr 24, 2012 by Matt</small>
</div>

<blockquote class="example1" lang="en">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing
  elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
  <cite>Somebody famous</cite>
</blockquote>

<p class="note">This example also contains automatic hyphenation. Resize the window to see how it works.</p>


<div class="credits">
  <span><a href="http://code-tricks.com/awesome-blockquote-styling-with-css/" rel="bookmark" title="Permanent Link to &quot;Awesome Blockquote Styling with CSS&quot;">Awesome Blockquote Styling with CSS</a></span>
  <small>posted on November 20, 2013 by Tirumal</small>
</div>

<blockquote class="example2">
  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer
  tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
  <cite>Somebody else famous also</cite>
</blockquote>

/* Example 1 */

blockquote.example1 {
  display: block;
  margin: 0 auto;
  padding: 0 1.2em;
  position: relative;
  background: #fff;
  /* Font */
  
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  /* Hyphenation */
  
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

blockquote.example1:before {
  display: block;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #7a7a7a;
}

blockquote cite {
  color: #999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

blockquote cite:before {
  content: "\2014 \2009";
  /*  an em dash and a space before the text */
}
/* Example 2 */

blockquote.example2 {
  display: block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 auto;
  position: relative;
  /*Font*/
  
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  /*Borders - (Optional)*/
  
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;
  /*Box Shadow - (Optional)*/
  
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote.example2:before {
  content: "\201C";
  /*Unicode for Left Double Quote*/
  /*Font*/
  
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  /*Positioning*/
  
  position: absolute;
  left: 10px;
  top: 5px;
}

blockquote:after {
  /*Reset to make sure*/
  
  content: "";
}

blockquote.example2 cite {
  color: #999999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
  text-align: right;
}

blockquote a,
blockquote a:link {
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover {
  color: #666;
}

blockquote em {
  font-style: italic;
}