Click to copy character

Generated CSS

blockquote {
  quotes: "“" "”" "‘" "’";
}

blockquote q::before {
  content: open-quote;
}

blockquote q::after {
  content: close-quote;
}

Live Preview

She said, "He told me 'It is done' yesterday."

Nested Quotes Demo

Level 1: This is the outer quote. Level 2: This is nested inside.

Quote Style Comparison

English (US)
“Hello” ‘World’
English (UK)
‘Hello’ “World”
French (Guillemets)
« Hello » ‹ World ›
German
„Hello“ ‚World‘
German (Guillemets)
»Hello« ›World‹
Japanese
「Hello」 『World』
Chinese (Simplified)
“Hello” ‘World’
Chinese (Traditional)
「Hello」 『World』
Russian
«Hello» „World“
Polish
„Hello” «World»
Swedish
”Hello” ’World’
Finnish
”Hello” ’World’
Greek
«Hello» “World”
Hebrew
“Hello” ‘World’

Usage Examples

English Blockquotes

blockquote {
  quotes: "“" "”" "‘" "’";
}

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

French Style

blockquote:lang(fr) {
  quotes: "\00AB\00A0" "\00A0\00BB" "\2039\00A0" "\00A0\203A";
}

Japanese Quotation

blockquote:lang(ja) {
  quotes: "「" "」" "『" "』";
}

Multi-language Support

:root {
  --quote-open-1: "“";
  --quote-close-1: "”";
  --quote-open-2: "‘";
  --quote-close-2: "’";
}

blockquote {
  quotes: var(--quote-open-1) var(--quote-close-1)
          var(--quote-open-2) var(--quote-close-2);
}

/* French override */
:lang(fr) {
  --quote-open-1: "\00AB\00A0";
  --quote-close-1: "\00A0\00BB";
}

Remove Default Quotes

q {
  quotes: none;
}

/* Or use empty strings */
q {
  quotes: "" "";
}

Custom Quote Styling

.fancy-quote {
  quotes: "❝" "❞" "❛" "❜";
}

.fancy-quote q::before {
  content: open-quote;
  color: #e91e63;
  font-size: 1.2em;
}

.fancy-quote q::after {
  content: close-quote;
  color: #e91e63;
  font-size: 1.2em;
}

Reference

CSS quotes Property

ValueDescription
noneNo quotation marks are produced
autoBrowser chooses quotes based on content language
"open" "close"String pairs for each nesting level

Related Pseudo-elements

Content ValueDescription
open-quoteOpening quote from quotes property
close-quoteClosing quote from quotes property
no-open-quoteIncrement nesting without inserting
no-close-quoteDecrement nesting without inserting

Browser Support

BrowserVersion
Chrome11+
Firefox1.5+
Safari5.1+
Edge12+

Unicode Quote Characters

CharacterNameUnicode
“Left Double Quotation MarkU+201C
”Right Double Quotation MarkU+201D
‘Left Single Quotation MarkU+2018
’Right Single Quotation MarkU+2019
«Left-Pointing Double AngleU+00AB
»Right-Pointing Double AngleU+00BB
„Double Low-9 Quotation MarkU+201E
「」CJK Corner BracketsU+300C/D

Best Practices

  • Use language-appropriate quotation marks for internationalization
  • Define at least 2 levels of quotes for nested quotations
  • Use :lang() selectors for multi-language sites
  • Consider non-breaking spaces with guillemets (French style)
  • Test with actual content in the target language
  • Use CSS variables for easy theme/locale switching

Rate this tool