CSS-Eigenschaft quotes

Die Eigenschaft quotes stellt den Type der Anführungszeichen für den Inhalt ein.

Mit den Pseudo-Elementen ::before und ::after werden die Inhaltsmarkierungen am Anfang und am Ende eines Zitats eingefügt. Diese Pseudoelemente werden durch die Eigenschaft content definiert.

Es gibt verschiedene Typen von Anführungszeichen, die beliebtesten sind die geraden und die geschweiften Anführungszeichen.

Die Anführungszeichen hängen vom Benutzeragenten ab.

Anfangswert	Nicht definiert
Gilt für	Alle Elemente
Geerbt	Ja
Animierbar	Nein
Version	CSS2
DOM Syntax	Object.style.quotes = "'\2018' '\2019'";

Syntax

quotes: none | string | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example {
      quotes: "\00AB" "\00BB";
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft quotes</h2>
    <p><q class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</q></p>
  </body>
</html>

Versuch es selber!

Ein anderes Beispiel mit der Eigenschaft quotes:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example {
      quotes:  "\0022" "\0022" "\00AB" "\00BB";
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft quotes</h2>
    <p><q class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</q></p>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
none	Die Werte "open-quote" und "close-quote" der Eigenschaft content erzeugen keine Anführungszeichen.
[<string> <string>]+	Gibt das Anführungszeichen an. Das erste ist die Öffnungsmarke, das zweite ist die Schließungsmarke. Das erste Paar stellt die äußere Ebene der Notierung dar, das zweite Paar ist für die erste verschachtelte Ebene.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Anführungszeichen

Zeichen	Beschreibung	Eintragsnummer
"	doppeltes Anführungszeichen	\0022
'	einfaches Anführungszeichen	\0027
‹	einfaches, linkes französisches Anführungszeichen	\2039
›	einfaches, rechtes französisches Anführungszeichen	\203A
«	doppeltes, linkes französisches Anführungszeichen	\00AB
»	doppeltes, rechtes französisches Anführungszeichen	\00BB
`	linkes Anführungszeichen (single high-6)	\2018
՛	rechtes Anführungszeichen (single high-9)	\2019
“	linkes Anführungszeichen (double high-6)	\201C
”	rechtes Anführungszeichen (double high-9)	\201D
„	doppeltes Anführungszeichen (double low-9)	\201E