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 and quotes that was complete news to me. It's a great read, and you should check it out.

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

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

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

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

You see 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 quotation. For example, French uses « and » as quotes.

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 localisation and language-specific quotation into consideration. 🎉

Edit: Nate Weaver pointed out that 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 that are 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 liked this post, have a look at all things CSS on my blog or subscribe to my newsletter below.