Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle 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 web development learnings.

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.

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 quotations. For example, French uses ยซ and ยป quote characters.

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 localization and language-specific quotation into consideration. ๐ŸŽ‰

Display of the correct quotes with the q element

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!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 4 days ago.

Related Topics

Related Articles