CSS Blockquote mit Deutschen Anführungszeichen

Beim Zitieren wird ja seit Guttenberg viel Wert auf die korrekte Zitierweise gelegt. Für die Designer und Typografen unter euch sei dazu der Wikipediaartikel zu Anführungszeichen zu empfehlen. Denn oft werden die Anführungszeichen grauenhaft falsch gesetzt.

Um das ganze im Web in Zukunft schön zu gestalten, habe ich euch ein CSS gebaut, was auch mit deutschen Anführungszeichen an der richtigen Stelle funktioniert.

Das ganze funktioniert übrigens ohne Einbettung von Bildern mit den CSS Pseudoklassen :before und :after. Hier wird allerdings das :after Element links gefloatet und das :before Element rechts gefloatet. Somit erscheint „ auch unten links und “ oben rechts angezeigt.

blockquote {
  padding-left: 30px;
  padding-right: 30px;
  margin: 20px;
  margin-bottom: 30px;
}
blockquote:after {
  content: '„';
  display: block;
  float: left;
  font-size: 700%;
  margin-right: 10px;
  margin-left: -50px;
  margin-top: -140px;
  color: #c00;
}
blockquote:before {
  content: '“';
  display: block;
  float: right;
  font-size: 700%;
  margin-top: -40px;
  margin-right: -50px;
  color: black;
}

Das ganze funktioniert natürlich mit Zitaten jeder Länge, jedoch sollten sie mindestens bis zum Zeilenende gehen (daher auch blockquote).