CSS quotes Property

What You’ll Learn

The quotes property lets you choose quotation mark characters for nested text. It works with the content property and keywords open-quote and close-quote.

Introduction

The quotes property in CSS is used to define the type of quotation marks to be used for the content property in pseudo-elements like ::before and ::after.

This property allows you to specify which quotation marks should be used for nested quotations, providing greater control over the typography and style of your text content.

Definition and Usage

Browsers can add quote marks to the <q> element automatically, but custom typography often needs curly quotes, guillemets, or other regional styles.

Set quotes on a container such as blockquote, then insert marks with content: open-quote and content: close-quote on pseudo-elements or nested <q> tags.

📝 Syntax

The syntax for the quotes property involves specifying a list of pairs of opening and closing quotes.

element {
  quotes: none | auto | [open-quote close-quote]+;
}

Basic Example

blockquote {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

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

Syntax Rules

• Each pair is one open string followed by one close string.
• The first pair applies to the outermost quotation level.
• Additional pairs apply to deeper nested quotes.
• none turns off quote generation for that element.
• auto uses language-appropriate marks from the browser.
• Use with ::before, ::after, or <q> pseudo-elements.

🎯 Default Value

The default value of the quotes property is dependent on the browser’s default settings, which typically use standard quotation marks for the language of the document.

In CSS, the initial value is auto, so quote characters usually follow the document language unless you override them.

💎 Property Values

When Does quotes Matter?

quotes is the right tool when quotation typography should be consistent:

• Editorial sites — Match print-style curly quotes on pull quotes.
• Nested dialogue — Switch to single quotes inside double quotes automatically.
• Localized content — Use guillemets or other regional quote styles.
• Minimal UI — Remove default <q> marks with none.

For body text, good typography often beats hard-coded quote characters typed into HTML.

Examples Gallery

Start with the reference blockquote, disable quotes, try guillemets, and build a pull quote with pseudo-elements.

<style>
  blockquote {
    quotes: "\201C" "\201D" "\2018" "\2019";
  }
  blockquote::before { content: open-quote; }
  blockquote::after { content: close-quote; }
  blockquote q::before { content: open-quote; }
  blockquote q::after { content: close-quote; }
</style>

<blockquote>
  This is a blockquote with custom quotes.
  <q>This is a nested quote within the blockquote.</q>
</blockquote>

<style>
  .no-quotes {
    quotes: none;
  }
  .no-quotes q::before,
  .no-quotes q::after {
    content: none;
  }
</style>

<style>
  blockquote {
    quotes: "\00AB" "\00BB" "\2018" "\2019";
  }
</style>

<style>
  .pull-quote {
    quotes: "\201C" "\201D";
    position: relative;
  }
  .pull-quote::before {
    content: open-quote;
    position: absolute;
    left: 0;
    font-size: 2.5rem;
  }
</style>

quotes and the content property

quotes defines the characters. The content property inserts them using open-quote and close-quote on ::before and ::after.

Pair with semantic HTML such as <blockquote> and <q> so assistive technologies understand quoted material.

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

q::before { content: open-quote; }
q::after { content: close-quote; }

💡 Best Practices