CSS Blockquote Generator
Quote styles, and quotation marks the browser picks for you.
“Any sufficiently advanced technology is indistinguishable from magic.”
.quote {
margin: 0;
border-left: 3px solid #d8401f;
background: #f5f5f4;
border-radius: 6px;
padding: 20px;
}
.quote blockquote {
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: #1c1917;
/* Locale-aware marks: the browser picks open/close from the
`quotes` list, so nested quotations and other languages work
without hard-coding a character. */
quotes: "\201C" "\201D" "\2018" "\2019";
}
.quote blockquote p::before { content: open-quote; }
.quote blockquote p::after { content: close-quote; }
.quote figcaption {
margin-top: 11px;
font-size: 13px;
color: #665f5a;
font-style: normal;
}
.quote cite {
font-style: italic;
}
Stop hard-coding the quote character
Nearly every blockquote tutorial hard-codes the left curly quote as a literal character. That is correct in English and wrong in German, French and Japanese, it breaks on nested quotations, and it ends up in the reader's clipboard. CSS has had a property for this since 1998 and almost nobody uses it.
How to use it
-
Pick a style
Bordered, card, pull quote, minimal or testimonial. Each sets a complete starting point including how the quote marks are handled.
-
Choose how marks are drawn
The quotes property for real, locale-aware punctuation, or a large decorative glyph as pure ornament. Or neither.
-
Set the language
English, German, French or Japanese. One property changes the marks — no hard-coded characters.
-
Shape the box and type
Border, padding, radius, size, weight and line height, plus attribution styling.
-
Copy both
The CSS, and semantic HTML using figure, blockquote, figcaption and cite correctly.
The quotes property does the work
quotes takes four strings — open, close, nested open, nested close — and
content: open-quote pulls the right one. Switch the list and German „…“ or French
« … » just works. A quotation inside a quotation picks up the nested pair automatically,
which is something no hard-coded character can do.
figure, blockquote, figcaption, cite
The attribution is not part of the quotation, so it does not belong inside
<blockquote>. Wrap both in a <figure> and put the
credit in a <figcaption>. And <cite> marks the title of a
work, not a person — the book goes in cite, the author does not.
Reset the default margin first
Browsers give blockquote roughly 40px of horizontal margin, which is why an
unstyled quote sits oddly indented and why adding padding on top of it looks wrong. Zero the
margin before anything else.
Decorative glyphs are decoration
The oversized quotation mark in a testimonial card is ornament, not content. Keeping it in a
::before at low opacity keeps it out of copied text and out of the way of anyone
listening rather than reading.
Frequently asked questions
How do I add quotation marks in CSS?
quotes property on the element and use content: open-quote and content: close-quote in ::before and ::after. The browser then picks the correct mark, handles nested quotations automatically, and keeps the characters out of text people copy.Why use the quotes property instead of content: "\201C"?
quotes takes four values — open, close, nested-open, nested-close — so German „…“ or French « … » is a one-line change, and a quote inside a quote gets the right marks without any extra CSS.How do I style a blockquote in CSS?
blockquote ships with a browser margin of about 40px on each side, which is the first thing worth removing.Should the attribution go inside the blockquote?
<figure> and put the attribution in a <figcaption> beside the <blockquote>. The quote element should contain only the quoted words — the author's name was not part of what they said.What does the cite element actually mean?
<cite>Profiles of the Future</cite> is right and <cite>Arthur C. Clarke</cite> is not. The cite attribute on <blockquote> is different again — it takes a URL for the source.How do I add a large decorative quote mark?
::before pseudo-element with a big character, low opacity, and absolute positioning. Keep it in CSS rather than the HTML so it stays out of the accessibility tree and out of copied text — it is decoration, not content.Do quotation marks get read out by screen readers?
::before and ::after is announced by most screen readers, so real quote marks via open-quote are read as punctuation — which is correct. A large decorative glyph should be given low opacity and treated as ornamental, since hearing a lone quotation mark announced adds nothing.