Monday, January 7, 2019

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;
    font-size: 6em;
    z-index: -1;
blockquote.quote footer {
    font-size: 0.9em;
    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.

No comments:

Post a Comment