Pull quotes are commonly used in print publications to draw emphasis to a particular quote or excerpt from a document, typically placing it in a larger typeface nearby on the page. When creating a well formed HTML document, pullquotes introduce a challenge in that they require a passage of text to be repeated on the page. This has the potential to introduce confusion when the document is read without the accompanying style sheet. Ideally then, a pullquote should be considered a stylistic element and as such should be seperated from the document itself and rendered with a stylesheet.
Since techniques to hide portions of a webpage rely on using CSS or JavaScript, we’ll need to approach this problem from the other direction – in this case using CSS to display new content. In this tutorial we’ll place the pullquote text in the title attribute of a paragraph or page division, and use the :before pseudo element’s ability to generate content to display the pullquote on the page…