🗨️ CSS quotes Property — Complete Tutorial

🌐 What Is the quotes Property?

The quotes property in CSS defines the quotation marks used by the <q> HTML element and the pseudo-elementsopen-quote and close-quote.

>>“The quotes property controls how CSS inserts quotation marks automatically.”

Note

✔ Works with the <q> element
✔ Works with content: open-quote / close-quote
✔ Supports nested quotes (level 1, level 2...)

📦 Basic Syntax

Syntax

quotes: "«" "»" "‹" "›";

Each pair defines:
• First pair → Level 1 quotes
• Second pair → Level 2 quotes (quotes inside quotes)

📌 How <q> Uses quotes

Default behavior

<q>Hello world</q>

Browsers automatically add quotation marks around the text, and quotes controls what characters appear.

📌 Example: Custom Quote Style

Custom quotes

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

Produces smart quotes like in books.

📌 Using with Pseudo-Elements

The content property can insert quotes viaopen-quote and close-quote.

Pseudo-element quotes

blockquote::before {
  content: open-quote;
  font-size: 2rem;
  color: #ccc;
}

blockquote::after {
  content: close-quote;
  font-size: 2rem;
  color: #ccc;
}

📌 Nested Quotes

When quotes are nested, CSS automatically switches to the next pair.

Nested example

<q>Hello <q>inner quote</q> world</q>

CSS

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

Output becomes:“Hello ‘inner quote’ world”

📌 Removing Automatic Quotes

Remove quotes

q {
  quotes: none;
}

The <q> tag will no longer display quotation marks.

📌 Using quotes for Decorative Purposes

Decorative style

.fancy-quote::before {
  content: open-quote;
  color: gold;
  font-size: 3rem;
}

.fancy-quote::after {
  content: close-quote;
  color: gold;
  font-size: 3rem;
}

🧠 Browser Default Quote Styles

Browsers choose quotes based on user language, but you can override them.

LanguageDefault Quotes
English“ ” ‘ ’
French« » ‹ ›
German„ “ ‚ ‘

Note

Use :lang() pseudo-class to target language-specific quotes.

Language-specific quotes

:lang(fr) q {
  quotes: "«" "»" "‹" "›";
}

📌 Using open-quote & close-quote Manually

Manual insertion

.quote::before {
  content: open-quote " Hello ";
}

.quote::after {
  content: " world " close-quote;
}

⚠️ Limitations & Gotchas

  • ❗ open-quote and close-quote only work with content
  • ❗ quotes must provide an even number of values
  • ❗ Not useful without <q> or pseudo-elements
  • ❗ Nested quote levels require multiple pairs

🔥 Summary

The quotes property controls how quotation marks appear around text, especially inside <q> elements or pseudo-elements usingopen-quote and close-quote. It is essential for proper typography, accessibility, and multilingual content.

>>“Good typography starts with proper quotation style — CSS makes it easy.”

Learn more → MDN Docs 📘