Google Sheets iconSwift icon
Published at
Updated at
Reading time
2min

This post is part of my Today I learned series in which I share all my learnings regarding web development.

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.

Three sentences unstyled

How to display quotes using the pseudo-elements ::before and ::after

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...

Quote in three language wrapped in double quotes

... 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.

TIL – CSS supports language-dependent quotation

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. 🎉

Display of the correct quotes with the q element

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.

Related Topics

Related Articles