A Pull Quote is a special case of quotation in the typographic industry where a small fragment of a paragraph text is highlighted in a distintive box or selection and still present in the main body of the text.

I wanted to do this for HTML without repeating the text to avoid duplicate content and to have a simple CSS style that I could use anywhere I wanted to use a pull quote. This is how I accomplished pull quotes with CSS alone.

<

p>The first thing I did was to define a style for the pull quote that will affect all elements of the class .pull

	.pull:before{
		width:230px;
		float:right;
		margin:0px;
		padding:10px;
 
		color:#4169E1;
		line-height:1.2em;
		font-size:20px;
		font-style:italic;
 
		content: attr(start) attr(title) attr(end);
	}

The first thing to notice is that I’m using the .pull:before pseudo-class so I can latter use the CSS content property. The first section of the rule just defines the float box of the element that I’m injecting. In this case it has 230px width. The second section defines the typographic style of the text to be used. Finally the third section is where the magic happens. I’m using the content property to insert 3 blocks of text that are retrieved from the properties of the span.

For example, the above pull quote HTML on the second paragraph looks like this:

<p>I wanted to do this for HTML without repeating the text to avoid duplicate content and to have a simple CSS style that I could use anywhere I wanted to use a pull quote. This is <span class="pull" start="– " end=" –" title="how I accomplished pull quotes with CSS alone"></span>how I accomplished pull quotes with CSS alone.</p>

As you can see in the bold selection, I’ve created an empty span that has attributes start, end and title defined. These allows me to use those attributes in the CSS style sheet and personalize the pull quote with starting and ending elements according to what I want to do.