How to display language-specific quotes in CSS

Will Boyd's excellent article Diving into the ::before and ::after Pseudo-Elements includes nifty details about CSS quotes.

Let's say you're dealing with a multi-lingual site that quotes statements in different languages using the blockquote element.

<ul>
  <li lang="de">
    <blockquote>
      Hallo!
    </blockquote>
  </li>

  <li lang="fr">
    <blockquote>
      Salut!
    </blockquote>
  </li>
</ul>

Then, you'll discover that the browser's default user agent stylesheets don't include styling for the blockquote element.

But our quotes should stand out; let's add some proper quotation characters.

As a first step, let's display big and bold blockquote quotes with CSS pseudo-elements ::before and ::after.

blockquote::before, blockquote::after {
  content: '"';
  font-size: 2.5em;
}

blockquote {
  display: flex;
  align-items: center;
  /* more styles */
}

And that works all fine, but...

... here's a fun fact.

Quotation characters are language-specific. French, for example, uses « and ». Going all in with double quotes isn't correct and will anger quite some typography nerds (and French people).

Luckily, we can let CSS choose the correct quotes for us!

Use open-quote and close-quote as content values, and let the browser do the hard work!

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

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

These two values take localization and language-specific quotation into consideration. Success!

<ul>
  <li lang="de">
    <blockquote>
      Hallo!
    </blockquote>
  </li>
  <li lang="fr">
    <blockquote>
      Salut!
    </blockquote>
  </li>
  <li lang="en">
    <blockquote>
      Hello!
    </blockquote>
  </li>
</ul>
<ul>
  <li lang="de">
    <blockquote>
      Hallo!
    </blockquote>
  </li>
  <li lang="fr">
    <blockquote>
      Salut!
    </blockquote>
  </li>
  <li lang="en">
    <blockquote>
      Hello!
    </blockquote>
  </li>
</ul>

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

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

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

If you're dealing with shorter and inlinable quotes, the q element already comes with accurate browser default styles to display the correct quotes.

<div lang="de">
  <p>Er sagte <q>Das wird nichts!</q>.</p>
</div>

The short German sentence above is displayed with the correct surrounding quotes.

open-quote and close-quote even consider nested quotes and use the correct characters (in German they're „ “ and ‚ ‘).

Wonderful!

Whether you rely on browser defaults with q or implement your own quotations, you'll be on the safe side with content: open-quote; and content: close-quote;. Very cool!

But what if you want to use custom quote styles?

To overwrite the automatically applied quote characters the quotes property helps out.

<div lang="de">
  <p>
    Er sagte <q>Das wird nichts!</q>.
  </p>
</div>
<div lang="de">
  <p>
    Er sagte <q>Das wird nichts!</q>.
  </p>
</div>

div {
  quotes: "__" "__" "_" "_";
}
div {
  quotes: "__" "__" "_" "_";
}

And there we have all the options to make your quotes stand out! Happy quoting.