Join Chris Converse for an in-depth discussion in this video Adding quote marks with pseudo-elements, part of Design the Web: Creating a Pull Quote with CSS.
- View Offline
- Now at this point, I want to add…the large quote marks to our blockquote,…but I don't want to add any content to the HTML,…so we're going to use CSS pseudo-elements…to add a beginning double quote and an ending double quote.…Now when we add content using these CSS pseudo-element,…we can simply use HTML entities,…so we have to use Unicode characters…in order to specify that content…within the value of a property in CSS.…So there are many places online…that you can find a list of all the Unicode characters.…The one that I'm showing here, you can find on Wikipedia,…and what we're going to be doing…is adding the 201C and the 201D.…
201C is for the left double quote…and 201D is for the right double quote.…And you'll notice next when we add this to our CSS,…we won't be using the letter U or the Plus sign.…So for other CSS pseudo-elements,…you can certainly use this list of Unicode characters…to add any characters into your elements.…So back in our CSS file,…I'm going to come up here and copy the blockquote selector,…
Chris Converse provides free exercise files for every installment of Design the Web. Download the files to practice styling pull quotes on your own website.