Zitat mit :before und :after - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Zitat mit :before und :after - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. Zitat mit :before und :after." />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--

  .zitat {
     quotes: '„' '“' '‚' '‘';
  }  /* Definition fuer unbekannte Sprache */

  *[lang="de"].zitat {
     quotes: '„' '“' '‚' '‘'
  }

  *[lang="en"].zitat {
     quotes: '“' '”' '‘' '’'
  }

  .zitat:before {
     content: open-quote;
     color: #ff0000;
  }

  .zitat:after {
     content: close-quote;
     color: #ff0000;
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>Zitat mit :before und :after - Cascading Style Sheets</h2>

<p class="zitat" lang="de">Dieses „Zitat“ bekommt am Anfang
und Ende zusätzlich ein öffnendes und schließendes
Anführungszeichen in rot.</p>

<p class="zitat" lang="en">This “citation” starts and ends
with additional red-coloured quotes.</p>

<p>Anführungszeichen lassen sich auch sprachabhängig definieren.
Beispiel:</p>

<pre>
  *[lang="de"].zitat { quotes: '„' '“' '‚' '‘' }
  *[lang="en"].zitat { quotes: '“' '”' '‘' '’' }
  *[lang="fr"].zitat { quotes: '«' '»' '‹' '›' }
</pre>

<p>Dieses Beipsiel funktioniert nicht im Internet Explorer 6,
da die Pseudo-Elemente :before und :after als auch die Eigenschaften
content und quote nicht implementiert sind.</p>

</body>
</html>