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>

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>

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

Browser-Support

chrome edge firefox safari opera
11.0+ 12.0+ 1.5+ 9.0+ 4.0+

Übe dein Wissen

Was ist die Standarddefinition für das Quotes CSS-Eigenschaft?
Finden Sie das nützlich?