A pullquote is typically used in articles to draw attention to a particular phrase, topic, or fact. Pullquotes (also sometimes referred to as lift-out or call-out quotes) are usually set in a font is that larger and more visible than paragraph text; body copy is typically wrapped around the quote.

<blockquote> is the most appropriate element for pullquotes. As a class, you could apply something like:

.pullquote {
	padding: 2.6rem 2.2rem 2rem 3.6rem;
	width: 24rem; 
	margin: 0 2rem 2rem 0;
	float: left;
	font-family: Questrial, Helvetica, sans-serif;
	font-size: 1.8rem;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	color: #FFF;
	text-transform: uppercase;
	background: #2F2F2F;
	border: 1px solid #eee;
	box-shadow: 0 0 5px #2F2F2F;
	font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive;
}

Our pullquote lacks quote marks. There are several ways of inserting them:

• Via HTML entities.
• Add markup such as <q>.
• Creating the appropriate characters in a word processor and cut-and-pasting them into the body copy.

It is at this point that the ability of CSS to produce generated content becomes useful. The concept of generated content can be a slippery one to grasp, primarily because it is outside the central scope of CSS. That central purpose is one that I have emphasized repeatedly: CSS is about the appearance of content, and HTML markup provides meaning for that content. Generated content draws something of a fuzzy line between the two.

Let’s consider a simple example: let’s say that every time we created a paragraph anywhere on any page in our website, we wanted to begin it with the words “Once upon a time” in red, followed by an ellipsis (…).

That is an awful lot of repeated typing for every paragraph, with many possibilities for incorrect entries and mistakes. At that stage we could argue that “Once upon a time… “ becomes part of the consistent appearance of every paragraph: decorative content. To achieve that, we have the pseudo-class selector :before

p:before {
	content: ("Once upon a time… ");
	color: red;
}

The content attribute can be set to almost anything: a keyword, a string of characters, an HTML entity, an image (using the url syntax we used with background-image), a counter, even a sound.

For our example, we want every paragraph in our pull quote to be preceded by an open quote mark:

.pullquote p:before {
	content: open-quote;
}

And a close-quote at the end:

.pullquote p:after {
	content: close-quote;
}

You can use generated content for many things: a good example would be a navigational list in which the dividers between list-items was a diagonal slash (/) rather than a vertical border.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/DJjpE