quotes
Quick Summary for quotes
The quotes CSS property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the CSS content property.
Code Usage for quotes
/* Keyword value */ quotes: none; quotes: auto;  /* <string> values */ quotes: "«" "»";           /* Set open-quote and close-quote to the French quotation marks */ quotes: "«" "»" "‹" "›";   /* Set two levels of quotation marks */  /* Global values */ quotes: inherit; quotes: initial; quotes: revert; quotes: unset; 
More Details for quotes

quotes

The quotes CSS property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the CSS content property.

Syntax

/* Keyword value */ quotes: none; quotes: auto;  /* <string> values */ quotes: "«" "»";           /* Set open-quote and close-quote to the French quotation marks */ quotes: "«" "»" "‹" "›";   /* Set two levels of quotation marks */  /* Global values */ quotes: inherit; quotes: initial; quotes: revert; quotes: unset; 

Values

none

The open-quote and close-quote values of the content property produce no quotation marks.

auto

Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).

[<string> <string>]+

One or more pairs of <string> values for open-quote and close-quote. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.

Formal definition

Initial valuedepends on user agent
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

none | auto | [ <string> <string> ]+

Examples

Basic quote marks

HTML
<q>To be or not to be. That's the question!</q> 
CSS
q {   quotes: '"' '"' "'" "'"; } q::before {   content: open-quote; } q::after {   content: close-quote; } 
Result

Auto quotes

For most browsers, the default value of quotes is auto (Firefox 70+), or the browser otherwise had this default behavior (Chromiums, Safari, Edge), so this example works without it being explicitly being set.

HTML
<div lang="fr">   <q>Ceci est une citation française.</q> <div> <hr> <div lang="ru">   <q>Это русская цитата</q> <div> <hr> <div lang="de">   <q>Dies ist ein deutsches Zitat</q> <div> <hr> <div lang="en">   <q>This is an English quote.</q> <div> 
CSS
/*q {   quotes: auto; }*/ 
Result

Specifications

Specification
CSS Generated Content Module Level 3 # quotes

See also

content Select your preferred language English (US)DeutschEspañolFrançais日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
“We ought to take outdoor walks in order that the mind may be strengthened and refreshed by the open air and much breathing.".
Seneca
Random CSS Property

::marker

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.
::marker css reference