Beispiel:CSS-footnotes-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">  
  <style>
article {
  counter-reset: footnotes;
}
article p {
  max-width: 30em;
}

[role="doc-noteref"] {
  counter-increment: footnotes; 
  padding-left:.25em;
  padding-right: 0.5em;
  text-decoration: none;
}

[role="doc-noteref"]::after {
  content: '[' counter(footnotes) ']'; 
  vertical-align: super; 
  font-size: 0.75em; 
}

[role="doc-noteref"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}

article > footer {
  margin-top: 2em;
  border-top: 1px solid silver;
  font-size: 0.8em;
}

article > footer ol {
  padding-left: 2em;
}

x-ref {
  font-style: italic;
}

x-ref::before {
  content: '('; 
}

x-ref::after {
  content: ')'; 
}


  </style>
  <title>Fußnoten - 3</title>
</head>

<body>
    <article>
      <h1>Fußnoten mit &lt;x-ref>-Element</h1>

  <p>Fussnoten <x-ref>Fußnoten sind Anmerkungen am Seitenende. Sie liefern Verweise auf verwendete Quellen oder kommentieren den Haupttext.</x-ref> sind ausgelagerte Texte, die oft Randnotizen, Hinweise zu Quellen oder weiterführender Literatur beinhalten. Sie sind in der populären Literatur in der Regel nicht besonders erwünscht. In der wissenschaftlichen Literatur sind sie aber nicht wegzudenken. Fußnoten manuell einzufügen und zu pflegen kann sich bei fortlaufenden Textergänzungen zu einem Problem entwickeln.</p> 
<p>CSS<x-ref>Cascading Style Sheets</x-ref> ermöglicht es aber mit Counters<x-ref>CSS Counters sind, kurz gesagt, Variablen deren Werte durch CSS-Regeln inkrementiert (jeweils um 1 vergrößert) werden. </x-ref> Referenzen mit fortlaufenden Nummern hinzuzufügen. 
      Diese werden dann automatisch in einer sortierten Liste (ol) dargestellt. So werden Fußnoten zum Kinderspiel.</p>
<p>Dieses Beispiel verwendet custom elements<x-ref>SELF-Wiki: <a href="https://wiki.selfhtml.org/wiki/HTML/Web_Components/custom_elements">Custom Elements</a></x-ref>, die dann mit JavaScript automatisch durch Fußnoten ersetzt werden. </p>

  <footer>
    <h2 id="footnote-label">Fußnoten</h2>
    <ol>
  </ol>
  </footer>
</article>

</body>
</html>