Blockquote Styling

Tagged in:
• css

There are various ways to do this but to do it all in the CSS requires using the ::before pseudo-class and adding the quote using the content property.

You can add the the quote directly using the alt code 0147 (hold down the Alt key and press 0147 on the number pad section of the keyboard), or you can put the unicode code in which is \201C. Unicode characters can be chained together and if you need a space the code is \0020 which you can also get with the Alt code 32.

Three unicode characters chained together:

1::before {
2    content: '\25B2\0020\25AC';
3}

 1blockquote {
 2    position: relative;
 3    margin-left: 0;
 4}
 5
 6blockquote::before {
 7    position: absolute;
 8    content: '\201C';
 9    display: inline;
10    font-size: 4em;
11    left: -1.3rem;
12    top: -5px;
13}

You can also use the HTML cite attribute and pull it in using attr(cite) in using content in the ::after pseudo-class:

1<blockquote cite="Nelson Mandela">

And the CSS would be:

blockquote::after {
    content: attr(cite);
}

See this Codepen.

However since you cannot add the cite attribute in markdown you could either create a shortcode for it or perhaps an easier way to to simply make sure the last line of every blockquote has a source and add it there. Then use CSS to style the last paragraph in a blockquote: blockquote ::last-child. This would also allow the cite to be linked too.

• ◀ Previous
• Next ▶