psuedo-element-quotesI wanted to customize the style of blockquotes in the new WordPress theme I chose for http://pugix.com. I had seen a very attractive style consisting of semi-opaque very large double quote characters floating behind a blockquote. My research turned up a technique using pseudo-element selection, and inserting content consisting of an ASCII hexadecimal code for the double quote symbol before the element. Here’s what I did:

.entry-content blockquote::before {
     font-size: 11rem;
     font-family: Georgia, serif;
     font-style: normal;
     content: "\201C";
     position: absolute;
     top: 3.8rem;
     left: -3rem;
     opacity: 0.1;
}

I decided not to put it behind the text because it just made the text harder to read. I’m pretty happy with the result. My main guide for this was a “Don’t Wake Me Up” blog post by Kelly, titled PSEUDO-ELEMENT CONTENT AND SPECIAL CHARACTERS.

Here’s W3School’s page on the :before selector. Pseudo-elements are so powerful for CSS tricks.