A CodePen by Aaron Gustafson. Simple pull quote - This builds on the work of Maykel Loomans: http://miekd.com/articles/pull-quotes-with-html5-and-css/ and makes it a little less repetitious and brings JavaScript in to make it an enhancement. The API is simple: your data attribute simple provides a selector to identify the item to use as the pull…

index.html

<p>A pull quote is a typographical technique in which an excerpt or quote from an article is duplicated within the article using a different formatting style so that it jumps out at the reader.</p>

<p data-pullquote="b">Blatantly copying the excerpt of the pull quote into it’s own element is not the way to go. <b>A pull quote is a purely visual technique, and therefore should not change the structure of the body.</b> Next to that, a structural representation of the excerpt would be seen twice by people using feed readers or services like <a href="http://www.instapaper.com/">Instapaper</a>, as well as be re-read for people who use screen readers. So how can we best author this into our mark-up?</p>

<h3>Our good friend, the data attribute</h3>

<p><span class="caps">HTML5 </span>introduced the ability for authors to create custom non-visible data-attributes. These attributes can contain data that will not affect layout or presentation.</p>

<blockquote><p>Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.</p></blockquote>

<p>By adding a <code>data-pullquote</code> attribute to an element, we attach the text of the pull quote to it, yet do not add visible content.</p>

<hr/>

<p>Original source: <a href="http://miekd.com/articles/pull-quotes-with-html5-and-css/">http://miekd.com/articles/pull-quotes-with-html5-and-css/</a></p>

script.js

(function( $ ){
	
	var PULLQUOTE = 'data-pullquote';
	
	$('[' + PULLQUOTE + ']').each(function(){
	
		var $parent = $(this),
	      $quote = $parent.find( $parent.data('pullquote') );
		
		if ( $quote.length > 0 )
		{
			$parent
				.attr( PULLQUOTE, $quote.eq(0).text() )
				.addClass( 'has-pullquote ');
		}
		
	});
	
}( jQuery ));

style.scss

@import "compass";
body {
  margin: 0 140px 0 0;
  padding: 1em;
}
b {
  font-weight: inherit;
}

.has-pullquote::before {
	/* Reset metrics. */
	padding: 0;
	border: none;
	
	/* Content */
	content: attr(data-pullquote);
	
	/* Pull out to the right, modular scale based margins. */
	float: right;
	width: 320px;
	margin: 12px -140px 24px 36px;
	
	/* Baseline correction */
	position: relative;
	top: 5px;
	
	/* Typography (30px line-height equals 25% incremental leading) */
	font-size: 23px;
	line-height: 30px;
}

.pullquote-left::before {
	float: left;
	margin: 12px 31px 24px -102px;
	
	width: 251px;
}