Published at
Updated at
Reading time
4min
This post is part of my Today I learned series in which I share all my web development learnings.

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.

Display quotes using ::before and ::after

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!

CSS supports language-dependent quotation

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!

HTML
CSS
Preview

The q element displays the correct quotes by default

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 be aware that when using quotes in pseudo content (no matter if you do it via quotes, open-quote, close-quote or the <q> element), the quotes won't make it into your clipboard correctly if you copy the text.

If you copy the sentence above you'll get:

  • Er sagte Sie sagte Okay! und ich freute mich.. in Chromium and Webkit.
  • Er sagte "Sie sagte "Okay!" und ich freute mich.". in Firefox.

But what if you want to use custom quote styles?

Overwrite open-quote and close-quote

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

HTML
CSS
Preview

To default to inherit the correct quote characters is quotes: auto;, but if you need to disable and turn off open-quote / close-quote pseudo content use quotes: none;.

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

If you enjoyed this article...

Join 5.5k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles