CSS Quote
quotes
The quotes property sets the type of quotation marks for quotations.
Syntax
quotes: none; quotes: auto; quotes: "«" "»";
none
– Produce no quotation marks.auto
– Appropriate quote marks will be used (via the lang attribute)[<string> <string>]+
– One or more Pairs.
Note First pair represents the outer level of quotation.Second pair is for the first nested levelNext pair for third level and so on.
HTML
<q>Hello World</q>
CSS
q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; }
Auto quotes
- For most browsers, the default value of quotes is
auto
.
<div lang="fr"> <q>Salut tout le monde</q> </div> <hr> <div lang="es"> <q>Hola mundo</q> </div> <hr> <div lang="de"> <q>Hallo Welt</q> </div> <hr> <div lang="en"> <q>Hello World</q> </div>
Quotation Mark Characters
Quote | Description | Entity Number |
---|---|---|
“ | double quote | \0022 |
‘ | single quote | \0027 |
‹ | single, left angle quote | \2039 |
› | single, right angle quote | \203A |
« | double, left angle quote | \00AB |
» | double, right angle quote | \00BB |
‘ | left quote (single high-6) | \2018 |
’ | right quote (single high-9) | \2019 |
“ | left quote (double high-6) | \201C |
” | right quote (double high-9) | \201D |
„ | double quote (double low-9) | \201E |