How to display language-specific quotes in CSS

Will Boyd's excellent article Diving into the ::before and ::after Pseudo-Elements includes a nifty detail about CSS quotes that was new to me.

You might use the following HTML if you're maintaining a multi-lingual site that includes quotes in different languages.

<blockquote lang="en">
  That's cool!
</blockquote>

<blockquote lang="de">
  Das ist super!
</blockquote>

<blockquote lang="fr">
  C'est super!
</blockquote>

You might find out then that the browser's default user agent stylesheets don't include any styling for the blockquote element.

To display big and bold quotes wrapping the blockquote element, you can use CSS and leverage pseudo-elements to display a quote character before and after the blockquote.

blockquote::before {
  content: '"';
}

blockquote::after {
  content: '"';
}

blockquote::before, blockquote::after {
  opacity: 0.25;
  padding: 0 10px;
  font-size: 3em;
}

blockquote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* more styles */
}

And that works all fine, but...

... unfortunately, this approach will always display " as quotation characters. It's not considering language-specific quotations. For example, French uses « and » quote characters.

Let's change the CSS to use the correct quote characters automatically.

Use open-quote and close-quote as values for the content property.

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

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

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

Edit: Nate Weaver pointed out that the q element comes with accurate browser default styles for language-specific quotation characters. Great tip, thanks Nate!

<q lang="en">That's cool!</q>
<q lang="de">Das ist super!</q>
<q lang="fr">C'est super!</q>

The above markup displays the correct quotes using pseudo-elements defined in the browser default styles.

No matter if you're using blockquote or q elements, you can style any element with the correct quotes thanks to generated content and open-quote / close-quote. That's very cool!

CSS is incredibly powerful! 💪 If you like this post, have a look at all things CSS on my blog!