CSS: Displaying quotes before and after quotes
Summary
Learn how to display quotation marks automatically before and after quotes in HTML using the CSS quotes property and pseudo-elements like :before and :after.
Introduction #
When you need to display quotation marks automatically around text in Hypertext Markup Language (HTML) documents, the Cascading Style Sheets (CSS) quotes property is a powerful tool. It controls which quotation marks are used when browsers insert quotes through pseudo-elements such as :before and :after combined with the content property.
CSS quotes property #
The CSS quotes property defines the quotation marks that are used when you insert open-quote and close-quote values with the content property. It allows for precise control of typography and nested quotation styles in your web pages.
Global values #
The quotes property can accept several global CSS values that are supported across many properties. These global values allow you to control inheritance or revert to default behavior.
inherit- takes the value from the parent element.initial- resets to the browser’s default quotation style.revert- reverts to the value defined by the user agent stylesheet or user preference.unset- acts as eitherinheritorinitial, depending on whether the property is inherited by default.
String values #
The main use case of the quotes property involves string values, which define pairs of opening and closing quotation marks. You can specify multiple pairs for different nesting levels.
Examples:
quotes: "“" "”" "‘" "’";
This example defines double curly quotation marks for the first level of nesting and single curly quotation marks for nested quotes.
quotes: "«" "»" "‹" "›";
This example uses angle quotation marks, also known as guillemets, for both primary and nested levels.
Ideal usage with blockquote and q #
The HTML <blockquote> element is used for longer quotations that usually span multiple lines, while the <q> element represents short inline quotations. Applying the quotes property and pseudo-elements to these tags ensures consistent, automatic quotation formatting across your site without adding quotation marks directly to the HTML source.
Example #
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
In this example, the :before pseudo-element inserts an opening quotation mark before the content of the <blockquote> element using open-quote. The :after pseudo-element inserts a closing quotation mark using close-quote.
The actual characters that appear are determined by the quotes property, which can be set globally or on a specific element.
If the quotes property is not set, the browser uses its default quotation marks, which depend on the user’s language settings.
This method ensures that quotation marks appear automatically, maintaining semantic HTML and separating content from presentation.
Applicable HTML elements #
This technique can be applied to any HTML element that supports generated content, including:
<blockquote><q><div><span><p><article>
The CSS quotes property is most commonly used with blockquote and q elements. They are semantically intended for quoted text.
FAQ's #
Most common questions and brief, easy-to-understand answers on the topic:
What is the CSS quotes property used for?
The CSS quotes property defines which quotation marks to use when the browser inserts quotes automatically with open-quote and close-quote.
Can I apply this technique to elements other than blockquote and q?
Yes, you can apply the quotes property and pseudo-elements to any HTML element that supports generated content, such as div or span.
How does the content property work with open-quote and close-quote?
The content property inserts generated content before or after an element. When using open-quote or close-quote, it inserts the quotation marks defined by the quotes property.
Can I customize the style of quotation marks?
Yes, you can define custom quotation marks by specifying string values inside the quotes property, such as quotes: '“' '”' '‘' '’';.
What happens if the quotes property is not set?
If the quotes property is not set, the browser uses its default quotation marks, which depend on the user’s language settings.
Further readings #
Sources and recommended, further resources on the topic:
- MDN Web Docs: quotes
- WHATWG: HTML Living Standard - The q element
- WHATWG: HTML Living Standard - The blockquote element
- W3C: CSS 2.2 Specification - Generated Content and Quotes
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/License
CSS: Displaying quotes before and after quotes by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/displaying-quotes-before-and-after-quotes">CSS: Displaying quotes before and after quotes</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the Ditig legal page.
