pretty css blockquotes

Literally probably a decade ago, a friend's blog had a neat bit of styling for quotes that I've always meant to emulate - it had a big ol' quote mark as background to the right. 10 Simple CSS Snippets for Creating Beautiful Blockquotes linked to this codepen that was in the ballpark of what I was thinking of:

<blockquote> and then a <footer> tag for the citation (some of the examples used a semantically better "cite" attribute on the blockquote but you can't really do more markup, such as links, in that.)

I don't use a CSS preprocessor for my blog, and so the code I ended up with looks like this:

blockquote.quote {
    position: relative;
}
blockquote.quote::before {
    content: '\201C';
    position: absolute;
    left: -0.3em;
    top: -0.2em;
    color:#ccc;
    font-size: 6em;
    z-index: -1;
}
blockquote.quote footer {
    font-size: 0.9em;
    color:#999;
    padding-left: 1em;
}
blockquote.quote footer::before {
    content: '\2015';  
}
 
So much of my blog is about quoting things, it's nice to have a flexible way of showing that it's not me speaking.