CSS quotes Property

Definition and Usage

The quotes property sets which quotation mark strings the browser inserts for the HTML <q> element and for the open-quote / close-quote values of the content property.

Modern CSS uses auto for language-appropriate marks (via inherited lang). You can also set explicit string pairs for outer and nested levels, or use none to suppress marks. The property is inherited.

CSS Syntax

Property Values

How to Use quotes

Decide the mark strings, then let <q> or generated content insert them.

1. Set quotes on an ancestor (it is inherited) or on the quoted element itself.
2. Use a semantic <q> for inline quotations, or nest <q> for deeper levels.
3. Optionally add more string pairs for nested levels: outer first, then inner.
4. For non-q elements, set content: open-quote and close-quote on ::before / ::after.

Live Preview

Nested <q> elements pick marks from quotes. Change the value and watch outer and inner marks update.

CSS Examples

Each snippet focuses on quotes. Extra layout CSS is kept minimal. Use Try It Yourself for a live editor.

<style>
  q {
    quotes: "\201C" "\201D" "\2018" "\2019";
  }
</style>

<p>
  <q>She said <q>practice every day</q> and smiled.</q>
</p>

<style>
  q {
    quotes: none;
  }
</style>

<p>
  <q>Quoted text with no marks.</q>
</p>

<style>
  .quote {
    quotes: "«" "»";
  }
  .quote::before {
    content: open-quote;
  }
  .quote::after {
    content: close-quote;
  }
</style>

<p>
  <span class="quote">Bonjour</span>
</p>

Key Takeaways